bonus-ui/src/views/canteen/order/offlineManagement/index.vue

<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="日期">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd" style="width: 220px"
                :picker-options="pickerOptions" >
            </el-date-picker>
        </el-form-item>
        <el-form-item label="关键字">
            <el-input v-model="queryParams.custSearchInfo" placeholder="请输入用户姓名，编号，手机号" maxlength="20" clearable style="width: 220px"/>
        </el-form-item>
        <el-form-item label="订单号">
            <el-input v-model.number="queryParams.orderId" placeholder="请输入订单号" maxlength="20" clearable style="width: 220px" @input="(v)=>(queryParams.orderId=v.replace(/[^\d]/g,''))"/>
        </el-form-item>
        <!-- <el-form-item label="交易号">
            <el-input v-model="queryParams.tradeNo" placeholder="请输入交易号" maxlength="20" clearable style="width: 220px"/>
        </el-form-item> -->
        <el-form-item label="菜品名称">
            <el-input v-model="queryParams.goodsSearchInfo" placeholder="请输入菜品名称" maxlength="20" clearable style="width: 220px"/>
        </el-form-item>
        <el-form-item label="餐次">
            <el-select v-model="queryParams.mealtimeTypeList" multiple collapse-tags style="width: 220px" clearable>
                <el-option label="早餐" value="1"></el-option>
                <el-option label="午餐" value="2"></el-option>
                <el-option label="下午茶" value="3"></el-option>
                <el-option label="晚餐" value="4"></el-option>
                <el-option label="夜宵" value="5"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="所属区域" prop="areaId">
            <el-cascader v-model="queryParams.areaId"
            :options="treeAreaOptions" :filterable="true" style="width: 220px" :show-all-levels="false"
            :props="{
                emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                value:'id',label:'label'
            }" clearable collapse-tags @change="handleAreaChange">
            </el-cascader>
        </el-form-item>
        <el-form-item label="所属食堂" prop="canteenId">
            <el-select v-model="queryParams.canteenId" clearable placeholder="请选择所属食堂" style="width: 220px" @change="handleCanteenChange">
                <el-option v-for="item in canteenOptions"
                    :key="item.canteenId"
                    :label="item.canteenName"
                    :value="item.canteenId"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="所属档口" prop="stallId">
            <el-select v-model="queryParams.stallId" clearable placeholder="请选择所属档口" style="width: 220px" >
                <el-option v-for="item in stallOptions"
                    :key="item.stallId"
                    :label="item.stallName"
                    :value="item.stallId"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
            <el-select v-model="queryParams.orderStateList" clearable multiple collapse-tags style="width: 220px">
                <el-option
                    v-for="dict in dict.type.sm_order_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="Number(dict.value)"
                    />
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="支付方式">
            <el-select v-model="queryParams.payStateList" clearable multiple collapse-tags style="width: 220px">
                <el-option
                    v-for="dict in dict.type.sm_order_pay_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="Number(dict.value)"
                    />
            </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="用户类别">
            <el-select v-model="queryParams.psnType" style="width: 220px" clearable>
                <el-option
                v-for="dict in dict.type.sys_user_type"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
                />
            </el-select>
        </el-form-item>  -->
        <el-form-item label="所属组织" prop="deptIdList">
            <el-cascader v-model="queryParams.deptIdList"
            :options="deptOptions" :filterable="true" style="width: 240px" :show-all-levels="false"
            :props="{
                multiple: true,
                emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                value:'id',label:'label'
            }" clearable collapse-tags >
            </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
            <el-button
            type="primary"
            size="mini" :disabled="multiple"
            @click="handleBatchRefund"
            >批量退单</el-button>
        </el-col>
        <el-col :span="1.5">
            <el-button
            type="primary"
            size="mini" :disabled="multiple"
            @click="handleBatchWriteOff"
            >批量核销</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="mini" :disabled="multiple"
            @click="handleSyncPayState"
          >同步订单状态</el-button>
        </el-col>   -->
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="tableListData" height="800" ref="multipleTable" :row-key="(row)=>{return row.orderId}" @selection-change="handleOrderSelectionChange">
        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
        <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
                <template slot-scope="scope">
                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                </template>
        </el-table-column>
        <el-table-column label="订单类型" align="center" prop="orderType" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
                <dict-tag :options="dict.type.sm_order_type" :value="scope.row.orderType"/>
            </template>
        </el-table-column>
        <el-table-column label="就餐日期" align="center" prop="orderDate" :show-overflow-tooltip="true" width="100"/>
        <el-table-column label="餐次" align="center" prop="mealtimeName" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="菜品明细" align="center" prop="orderDetailList" :show-overflow-tooltip="true" width="120">
            <template slot-scope="scope">
                <span v-for="item in scope.row.orderDetailList" :key="item.detailId">{{ item.goodsName }}*{{ item.quantity }};</span>
            </template>
        </el-table-column>
        <el-table-column label="支付方式" align="center" prop="identityVerificationsssss" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.identityVerification==1">刷卡</span>
                <span v-if="scope.row.identityVerification==2">刷脸</span>
                <span v-if="scope.row.identityVerification==3">扫码</span>
            </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" prop="payableAmount" :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
                <span>{{ (scope.row.payableAmount/100).toFixed(2) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="实付金额" align="center" prop="realAmount" :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
                <span>{{ ((scope.row.payableAmount-scope.row.refundAmount)/100).toFixed(2) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="80"/>
        <el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="用户姓名" align="center" prop="nickName" :show-overflow-tooltip="true" width="100"/>
        <el-table-column label="用户手机号" align="center" prop="phoneNumber" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="所属组织" align="center" prop="deptFullName" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" width="120"/>
        <el-table-column label="所属档口" align="center" prop="stallName" :show-overflow-tooltip="true" width="120"/>
        <!-- <el-table-column label="用户类别" align="center" prop="psnTypeName" :show-overflow-tooltip="true" width="100"/> -->
        <el-table-column label="订单号" align="center" prop="orderId" :show-overflow-tooltip="true" width="180"/>
        <el-table-column label="下单时间" align="center" prop="orderTime" :show-overflow-tooltip="true" width="180"/>
        <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="订单状态" align="center" prop="orderState" :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
                <!-- <dict-tag :options="dict.type.sm_order_status" :value="scope.row.orderState"/>  -->
                <span v-if="scope.row.orderState==1">已下单</span>
                <span v-if="scope.row.orderState==2">已完成</span>
                <span v-if="scope.row.orderState==3&&scope.row.payState==3">已退单</span>
                <span v-if="scope.row.orderState==3&&scope.row.payState==4">已取消</span>
                <span v-if="scope.row.orderState==4">待下单</span>
                <span v-if="scope.row.orderState==5">部分退单</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row)"
            >详情</el-button>
            <el-button
              size="mini"
              type="text" v-if="scope.row.orderState==1||scope.row.orderState==2||scope.row.orderState==5"
              @click="handleRefundPart(scope.row)"
            >部分退款</el-button>
            <el-button
                size="mini"
                type="text" v-if="scope.row.orderState==1||scope.row.orderState==2||scope.row.orderState==4"
                @click="handleRefund(scope.row)"
            >退单</el-button>
            <el-button
                size="mini"
                type="text" v-if="scope.row.commentState==1"
                @click="checkEvaluate(scope.row)"
            >评价</el-button>
            <!-- <el-button
                size="mini"
                type="text" v-if="scope.row.orderState==1"
                @click="writeOffOrder(scope.row)"
            >核销</el-button>   -->
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 详情对话框 -->
      <el-dialog title="详情" :visible.sync="open" width="1000px" append-to-body>
        <div style="width: 100%;height: 600px;overflow-y: auto;">
            <el-descriptions class="margin-top" title="订单信息" :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">订单号</template>
                    {{orderInfoData.orderId}}
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                    <template slot="label">设备订单号</template>
                    {{ orderInfoData.macOrderId }}
                </el-descriptions-item> -->
                <!-- <el-descriptions-item>
                    <template slot="label">订单来源</template>

                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">订餐员</template>

                </el-descriptions-item> -->
                <!-- <el-descriptions-item>
                    <template slot="label">设备编号</template>
                    {{ orderInfoData.machineNum }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">设备名称</template>
                    {{ orderInfoData.deviceName }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">设备型号</template>
                    {{ orderInfoData.deviceModel }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">设备SN</template>
                    {{ orderInfoData.machineSn }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">	所属区域</template>
                    {{ orderInfoData.areaName }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">	所属食堂</template>
                    {{ orderInfoData.canteenName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	所属档口</template>
                    {{ orderInfoData.stallName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	用户姓名</template>
                    {{ orderInfoData.nickName }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">	用户编号</template>
                    {{ orderInfoData.userId }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	用户手机号</template>
                    {{ orderInfoData.phoneNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	所属组织</template>
                    {{ orderInfoData.deptFullName }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">	用户类别</template>
                    {{ orderInfoData.psnTypeName }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">	就餐日期</template>
                    {{ orderInfoData.orderDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	餐次</template>
                    {{ orderInfoData.mealtimeName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	订单金额</template>
                    {{ (orderInfoData.payableAmount/100).toFixed(2) }}
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                    <template slot="label">	餐券名称</template>
                    {{ orderInfoData.couponName }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">	餐券支付金额</template>
                    {{ (orderInfoData.couponAmount/100).toFixed(2) }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                  <template slot="label">	实付金额</template>
                  {{ ((orderInfoData.payableAmount-orderInfoData.refundAmount)/100).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	退款金额</template>
                    {{ (orderInfoData.refundAmount/100).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	支付方式</template>
                    <dict-tag :options="dict.type.sm_order_pay_type" :value="orderInfoData.payType"/>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	下单时间</template>
                    {{ orderInfoData.orderTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	支付时间</template>
                    {{ orderInfoData.payTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">	订单状态</template>
                    <span v-if="orderInfoData.orderState==1">已下单</span>
                    <span v-if="orderInfoData.orderState==2">已完成</span>
                    <span v-if="orderInfoData.orderState==3&&orderInfoData.payState==3">已退单</span>
                    <span v-if="orderInfoData.orderState==3&&orderInfoData.payState==4">已取消</span>
                    <span v-if="orderInfoData.orderState==4">待下单</span>
                    <span v-if="orderInfoData.orderState==5">部分退单</span>
                    <!-- <dict-tag :options="dict.type.sm_order_status" :value="orderInfoData.orderState"/>  -->
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                    <template slot="label">	流水号</template>
                    {{ orderInfoData.mealCode }}
                </el-descriptions-item> -->
                <el-descriptions-item>
                    <template slot="label">	备注</template>
                    {{ orderInfoData.remark }}
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">	人脸照片</template>
                    无
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">	菜品图片</template>
                    无
                </el-descriptions-item> -->
            </el-descriptions>
            <div style="margin: 10px 0;font-weight: bold;font-size: 16px;color: #000;">菜品信息</div>
            <el-table :data="orderInfoData.orderDetailList">
                <el-table-column label="菜品名称" align="center" prop="goodsName" :show-overflow-tooltip="true"/>
                <el-table-column label="单价(元)" align="center" prop="salePrice" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.salePrice/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="quantity" :show-overflow-tooltip="true"/>
                <el-table-column label="合计(元)" align="center" prop="totalAmount" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.totalAmount/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款数量" align="center" prop="refundNum" :show-overflow-tooltip="true"/>
                <el-table-column label="退款金额(元)" align="center" prop="refundAmount" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.refundAmount/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div style="margin: 10px 0;font-weight: bold;font-size: 16px;color: #000;">优惠明细</div>
            <el-table :data="orderInfoData.discountList">
                <el-table-column label="优惠项名称" align="center" prop="" :show-overflow-tooltip="true"/>
                <el-table-column label="变动类型" align="center" prop="" :show-overflow-tooltip="true"/>
                <el-table-column label="优惠/上浮金额" align="center" prop="" :show-overflow-tooltip="true"/>
            </el-table> -->
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="open=false">确 定</el-button>
          <el-button @click="open=false">取 消</el-button>
        </div>
      </el-dialog>


      <!-- 部分退款对话框 -->
      <el-dialog title="部分退款" :visible.sync="openPart" width="80%" append-to-body>
            <!-- <el-row>
                <el-col :span="2">退款方式:</el-col>
                <el-col :span="22">
                    <el-radio-group v-model="refundType" @change="choseRefundTypeRadio">
                        <el-radio label="1" style="font-size: 14px;margin-bottom: 10px;">按数量退款</el-radio>
                        <el-radio label="2" style="font-size: 14px;margin-bottom: 10px;">按金额退款</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row> -->

            <el-table :data="orderDetailList"  @selection-change="handleSelectionChange" :row-key="(row)=>{return row.detailId}" v-if="refundType==1">
                <el-table-column type="selection" width="50" align="center" :selectable="selectable"/>
                <el-table-column label="菜品名称" align="center" prop="goodsName" :show-overflow-tooltip="true"/>
                <el-table-column label="菜品单价" align="center" prop="salePrice" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.salePrice/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="菜品数量" align="center" prop="quantity" :show-overflow-tooltip="true"/>
                <el-table-column label="菜品金额" align="center" prop="totalAmount" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.totalAmount/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="可退款数量" align="center" prop="unRefundNum" :show-overflow-tooltip="true"/>
                <el-table-column label="已退款数量" align="center" prop="refundNum" :show-overflow-tooltip="true"/>
                <el-table-column label="已退款金额" align="center" prop="refundAmount" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.refundAmount/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="退款数量" align="center" prop="goRefundNum" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.goRefundNum" placeholder="退款数量" maxlength="20" clearable style="width: 100%" @change="inputNum(scope.row)"  @input="(v)=>(scope.row.goRefundNum=v.replace(/[^\d]/g,''))"/>
                    </template>
                </el-table-column>
                <el-table-column label="退款金额" align="center" prop="refundMoney" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ (scope.row.refundMoney/100).toFixed(2) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="refundType==2">
                <el-form :model="rowData" ref="rowData" :rules="refundRules" size="small" label-width="120px">
                    <el-form-item label="订单金额：">
                        <span>{{ (rowData.payableAmount/100).toFixed(2) }}</span>
                    </el-form-item>
                    <el-form-item label="实付金额：">
                        <span>{{ (rowData.realAmount/100).toFixed(2) }}</span>
                    </el-form-item>
                    <el-form-item label="可退金额：">
                        <span>{{ (rowData.payableAmount/100).toFixed(2) }}</span>
                    </el-form-item>
                    <el-form-item label="已退金额：">
                        <span>{{ (rowData.refundAmount/100).toFixed(2) }}</span>
                    </el-form-item>
                    <el-form-item label="本次退款金额：" prop="refundMoney">
                        <el-input v-model="rowData.refundMoney" placeholder="请输入本次退款金额" maxlength="20" clearable @input="(v)=>(rowData.refundMoney=v.replace(/[^\d.]/g, '').replace(/^(\d*\.\d{2}).*$/, '$1'))" style="width: 200px;"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmRefund">确 定</el-button>
                <el-button @click="openPart=false">取 消</el-button>
            </div>
      </el-dialog>
      <!-- 评价弹窗 -->
      <el-dialog title="订单评价" :visible.sync="openEva" width="500px" append-to-body>
        <div style="width: 100%;height: 200px;overflow-y: auto;">
        <div v-for="(item,index) in evaluateList" :key="index" style="display: flex;width: 100%;margin-bottom: 15px;align-items: center;">
            <div style="width: 35%;word-break: break-all;font-size: 16px;text-align: center;">
                {{ item.dishesName }}
            </div>
            <div style="width: 65%;">
                <el-rate v-model="item.starLevel" size="large" disabled text-color="#ff9900"></el-rate>
            </div>
        </div>
        </div>
        <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openEva=false">确 定</el-button>
        <el-button @click="openEva=false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 提醒对话框 -->
      <el-dialog :title="handleType+'提醒'" :visible.sync="openRemind" width="40%" append-to-body>
        <div class="remind-question">请问是否对以下可{{handleType}}订单进行{{handleType}}操作？</div>
        <div class="remind-title">可{{handleType}}订单 {{ableList.length}} 笔</div>
        <div v-for="(item,index) in ableList" :key="item.orderId">{{ (index+1) }}. 订单编号:{{item.orderId}}，用户姓名:{{item.nickName}}，用户编号:{{item.userId}}，订单金额:{{(item.payableAmount/100).toFixed(2)}}</div>

        <div class="remind-title">不可{{handleType}}订单 {{unableList.length}}  笔</div>
        <div v-for="(item,index) in unableList" :key="item.orderId">{{ (index+1) }}. 订单编号:{{item.orderId}}，用户姓名:{{item.nickName}}，用户编号:{{item.userId}}，订单金额:{{(item.payableAmount/100).toFixed(2)}}</div>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmRemind" :disabled="ableList.length==0">确 定</el-button>
            <el-button @click="openRemind=false">取 消</el-button>
        </div>
      </el-dialog>



    </div>
  </template>

  <script>
  import { deptTreeSelect } from '@/api/system/user'
  import { systemAreaTreeApi,getCanteenByAreaApi,getStallByCanteenApi } from "@/api/base/stall";
  import { orderPageListApi,refundOrderPartApi,refundOrderApi,writeOffOrderApi,syncOrderPayStateApi,getEvaluaOrderDetailApi } from "@/api/order/offline";
  import { decryptWithSM4,encryptWithSM4 } from '@/utils/sm';
  export default {
    name: "",
    dicts: ['sys_user_type','sm_order_type','sm_order_status','sm_order_pay_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //表格数据
        tableListData: [],
        // 是否显示弹出层
        open: false,
        dateRange:[new Date(),new Date()],
        pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                picker.$emit('pick', [start, end]);
                }
            },{
                text: '最近一个月',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            },{
                text: '最近三个月',
                onClick(picker) {
                const start = new Date();
                const end = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
                picker.$emit('pick', [start, end]);
                }
            }]
        },
        treeAreaOptions:[],//区域树
        canteenOptions:[],//查询-食堂下拉选
        stallOptions:[],//查询-档口下拉选
        //下拉选数据
        // orderStateOptions:[],
        // orderPayOptions:[],
        // nuclearModeOptions:[],
        deptOptions:[],//组织树
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            custSearchInfo: undefined,//关键字
            orderId: undefined, //订单号
            orderTypeList:[2],//订单类型2线上
            goodsSearchInfo: undefined, //菜品名称
            mealtimeTypeList:[],//餐次
            areaId:null,//区域-单选
            canteenId:null,//食堂-单选
            stallId:null,//档口-单选
            orderStateList:[],//订单状态
            payStateList:[], //支付方式
            deptIdList:[],  //所属组织
        },
        //订单详情
        orderInfoData: {},
        //部分退款
        openPart:false,
        orderDetailList:[],
        refundType:'1',
        refundList:[],
        rowData:{},
        refundRules:{
            refundMoney: [
                {
                    required: true,
                    message: "本次退款金额不能为空",
                    trigger: "blur",
                }
            ]
        },
        //批量操作
        batchIds:[],
        batchList:[],//批量数据数组
        //批量核销批量退单提醒对话框
        handleType:"退单",
        ableList:[],
        unableList:[],
        openRemind:false,
        openEva:false,
        evaluateList:[],
      };
    },
    created() {
        this.getAreaTreeData();
        this.getDeptTree();
        this.getList()
    },
    methods: {
        //区域树
        getAreaTreeData() {
            systemAreaTreeApi({}).then((response) => {
                this.treeAreaOptions = response.data;
            });
        },
        handleAreaChange(e){
            let param= {
                areaId:this.queryParams.areaId,"canteenType": 1
            }
            getCanteenByAreaApi(param).then((response) => {
                this.canteenOptions=response.rows||[]
                this.queryParams.canteenId=null
                this.stallOptions=[]
                this.queryParams.stallId=null
            });
        },
        handleCanteenChange(e){
            let param= {
                canteenId:this.queryParams.canteenId
            }
            getStallByCanteenApi(param).then((response) => {
                this.stallOptions=response.rows||[]
                this.queryParams.stallId=null
            });
        },

        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = this.filterTree(response.data)
            })
        },
        filterTree(nodes) {
            return nodes
                .map((node) => {
                    if (node.children) {
                        node.children = this.filterTree(node.children)
                    }
                    return node
                })
                .filter((node) => node.status !== '1')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [new Date(),new Date()]
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                custSearchInfo: undefined,//关键字
                orderId: undefined, //订单号
                orderTypeList:[2],//订单类型2线上
                goodsSearchInfo: undefined, //菜品名称
                mealtimeTypeList:[],//餐次
                areaId:null,//区域-单选
                canteenId:null,//食堂-单选
                stallId:null,//档口-单选
                orderStateList:[],//订单状态
                payStateList:[], //支付方式
                deptIdList:[],  //所属组织
            }
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let param = {
                ...this.queryParams,
                "orderTypeList":[11],
            }
            if(this.dateRange&&this.dateRange.length>0){
                param.startDate=this.formatDate(this.dateRange[0])
                param.endDate=this.formatDate(this.dateRange[1])
            }else{
                param.startDate=undefined;
                param.endDate=undefined;
            }
            if(this.queryParams.canteenId){
                param.canteenIdList = [this.queryParams.canteenId]
            }
            if(this.queryParams.stallId){
                param.stallIdList = [this.queryParams.stallId]
            }
            orderPageListApi(param).then(response => {
                this.tableListData = response.rows;
                this.tableListData.forEach(item=>{
                    if(item.phoneNumber&&item.phoneNumber!=""){
                        this.$set(item,"phoneNumber",decryptWithSM4(item.phoneNumber))
                    }
                })
                this.total = Number(response.total);
                this.loading = false;
            });
        },
        /** 修改按钮操作 */
        handleView(row) {
            this.orderInfoData = Object.assign({}, row)
            this.open = true;
        },
        /** 部分退款按钮操作 */
        handleRefundPart(row) {
            this.orderDetailList = row.orderDetailList;
            this.rowData = row;
            this.$set(this.rowData,"refundMoney","")
            console.log(this.rowData)
            this.orderDetailList.forEach((item,index)=>{
                this.$set(this.orderDetailList[index],"unRefundNum",item.quantity-item.refundNum)
              this.$set(this.orderDetailList[index],"goRefundNum",item.unRefundNum)
                this.$set(this.orderDetailList[index],"refundMoney",Number(item.goRefundNum)*(item.salePrice).toFixed(2))
            })
            this.refundList=[]
            this.openPart = true;
        },
        inputNum(row){
            if(Number(row.goRefundNum)>row.unRefundNum){
                this.$modal.msgError("退款数量不能大于可退款数量!");
                row.goRefundNum=row.unRefundNum
            }
            row.refundMoney = Number(row.goRefundNum)*(row.salePrice).toFixed(2)
            this.refundList.forEach((item) => {
                if(item.detailId==row.detailId){
                    this.$set(item,"quantity",row.goRefundNum)
                }
            })
        },
        choseRefundTypeRadio(e){},
        handleSelectionChange(selection){
            // console.log(selection)
            this.refundList = selection.map((item) => {
                let obj = {'detailId':item.detailId,'quantity':item.goRefundNum}
                return obj
            })
        },
        selectable(row){
          return row.unRefundNum>0
        },
        confirmRefund(){
            if(this.refundType==1){
                if(this.refundList.length==0){
                    this.$modal.msgError("请先勾选退款菜品!");
                }else{
                    console.log(this.refundList)
                    let param = {
                        orderPartRefundDetailList:this.refundList,
                        orderId:this.rowData.orderId
                    }
                    refundOrderPartApi(param).then(response => {
                        if(response.code==200){
                            this.$modal.msgSuccess("退款成功");
                        }
                        this.getList()
                        this.openPart = false;
                    }).catch(err => {
                        console.log(111)
                    })
                }
            }
            if(this.refundType==2){
                this.$refs["rowData"].validate(valid => {
                    if (valid) {
                        let param = {
                            refundAmount:Number(this.rowData.refundMoney),
                            orderId:this.rowData.orderId
                        }
                        refundOrderPartApi(param).then(response => {
                            if(response.code==200){
                                this.$modal.msgSuccess("退款成功");
                            }
                            this.getList()
                            this.openPart = false;
                        });
                    }
                });
            }
        },
        /** 退单按钮操作 */
        handleRefund(row) {
            let param = {
                // backType: 1,
                // macOrderId:row.macOrderId,
                orderId:row.orderId
            }
            this.$modal.confirm('是否确认退单？').then(function() {
                return refundOrderApi(param);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("退单成功");
            }).catch(() => {});
        },
        /** 核销按钮操作 */
        writeOffOrder(row) {
            let param = {
                orderIdList:[row.orderId]
            }
            this.$modal.confirm('是否确认核销？').then(function() {
                return writeOffOrderApi(param);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("核销成功");
            }).catch(() => {});
        },
        /** 评价按钮操作 */
        checkEvaluate(row) {
            this.evaluateList = []
            getEvaluaOrderDetailApi(row.orderId).then(response => {
                console.log(response)
                this.evaluateList = response.data.detailList;
                this.openEva = true
            }).catch(err => {

            })
        },
        // ----订单批量操作------
        handleOrderSelectionChange(selection){
            this.batchIds = selection.map((item) => item.orderId)
            this.batchList = selection;
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        //批量退单
        handleBatchRefund(){
            this.handleType="退单"
            this.ableList = []
            this.unableList = []
            this.batchList.forEach(item=>{
            if(item.orderState==1||item.orderState==2){
                this.ableList.push(item)
            }else{
                this.unableList.push(item)
            }
            })
            this.openRemind = true
        },
        //批量核销
        handleBatchWriteOff(){
            this.handleType="核销"
            this.ableList = []
            this.unableList = []
            this.batchList.forEach(item=>{
            if(item.orderState==1||item.orderState==5){
                this.ableList.push(item)
            }else{
                this.unableList.push(item)
            }
            })
            this.openRemind = true
        },
        confirmRemind(){
            console.log(this.ableList.length)
            if(this.ableList.length>0){
            if(this.handleType=="退单"){
                this.ableList.forEach(item=>{
                    let param = {
                        backType: 1,
                        macOrderId:item.macOrderId,
                        orderId:item.orderId
                    }
                    refundOrderApi(param).then(response => {
                        // if(response.code!=200){
                        //     this.$modal.msgError(response.msg);
                        // }
                    });
                })
                this.$modal.msgSuccess("批量退单完成");
            }
            if(this.handleType=="核销"){
                this.ableList.forEach(item=>{
                let param = {
                    orderId:item.orderId
                }
                writeOffOrderApi(param).then(response => {
                    // if(response.code!=200){
                    //     this.$modal.msgError(response.msg);
                    // }
                });
                })
                this.$modal.msgSuccess("批量核销完成");
            }
            setTimeout(()=>{
                this.getList()
                this.$refs.multipleTable.clearSelection()
                this.openRemind = false
            },1000)
            }
        },
        //同步订单状态
        handleSyncPayState(){
            if(this.batchIds.length>0){
            this.batchIds.forEach(item=>{
                syncOrderPayStateApi({orderId:item}).then(response => {
                    if(response.code!=200){
                    this.$modal.msgError(response.msg);
                    }
                });
            })
            this.$modal.msgSuccess("同步已完成");
            this.getList()
            this.$refs.multipleTable.clearSelection()
            }else{
            this.$modal.msgError("请先勾选订单数据！");
            }
        },

        //日期
        formatDate(date) {
            // 格式化为 YYYY-MM-DD
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
  };
  </script>