moxuan_takeaway_manage/src/views/entryManagement/entryManagement.vue

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="入账管理" name="first">
      <div style="display: inline-block;">
        <div style="position: relative;display: inline-block;margin: 3px;">
          <span>商铺名称:</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入商铺名称"
            v-model="shopName"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 3px;">
          <span>商铺手机号:</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入商铺手机号"
            v-model="shopPhone"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 3px;">
          <span>用户手机号:</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入用户手机号"
            v-model="userPhone"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 3px;">
          <span>优惠活动:</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入优惠活动标题"
            v-model="activityTitle"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 3px;">
          <span>订单号:</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入订单号"
            v-model="orderNumber"
          ></el-input
          >&nbsp;&nbsp;
        </div>
        <div style="margin:5px;display: inline-block;">
          <span>开始时间：</span>
          <el-date-picker
            style="width: 220px;margin-left: 10px;"
            v-model="startTime"
            align="right"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间"
          >
          </el-date-picker
          >&nbsp;&nbsp;&nbsp;
        </div>
        <div style="margin:5px;display: inline-block;">
          <span>截止时间：</span>
          <el-date-picker
            style="width: 220px;margin-left: 10px;"
            v-model="endTime"
            align="right"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择截止时间"
          >
          </el-date-picker>
        </div>
        <div style="display: inline-block;margin: 5px;">
          <span>异常订单:</span>
          <el-select
            @change="phoneSelect"
            :clearable="true"
            v-model="flag"
            placeholder="请选择异常订单"
          >
            <el-option label="非异常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </div>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="phoneSelect"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans"
          >重置</el-button
        >
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="warning"
          icon="document"
          @click="exportList"
        >
          导出Excel
        </el-button>
        <!-- <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="abnormity"
          >查询异常订单</el-button
        > -->
      </div>
      <div style="color: orange;">
        *
        导出订单提示：导出订单前请进行时间或者状态等筛选，否则导出订单量过多易出现卡顿或系统崩溃
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="80"
        ></el-table-column>
        <el-table-column fixed prop="shopName" label="店铺"></el-table-column>
        <el-table-column
          fixed
          prop="shopPhone"
          label="店铺手机号"
        ></el-table-column>
        <el-table-column fixed prop="userName" label="下单用户">
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号"></el-table-column>
        <el-table-column prop="title" label="标题" width="200">
        </el-table-column>
        <el-table-column prop="money" label="订单类型" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.orderTypeExtra == 1">到店取餐</span>
            <span v-if="scope.row.orderTypeExtra == 2">骑手配送</span>
            <span v-if="scope.row.orderTypeExtra == 3">商家配送</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderAmount"
          label="订单总金额"
        ></el-table-column>
        <el-table-column
          prop="couponName"
          label="优惠活动标题"
        ></el-table-column>
        <el-table-column
          prop="activityDiscountAmount"
          label="活动优惠金额"
        ></el-table-column>
        <el-table-column
          prop="couponMoney"
          label="优惠券优惠金额"
        ></el-table-column>
        <el-table-column prop="payMoney" label="用户付款金额"></el-table-column>
        <el-table-column prop="smsMoneyTotal" label="短信费"></el-table-column>
        <el-table-column prop="errandMoney" label="跑腿费"> </el-table-column>
        <el-table-column prop="orderNumber" label="订单号" width="170">
          <!-- <template slot-scope="scope">
            <span style="cursor: pointer;"">{{
              scope.row.orderNumber
            }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="money" label="商家实际收入" width="110">
          <template slot-scope="scope">
            <span
              @click="errandMoneyClick(scope.row)"
              style="cursor: pointer;color: #3e8ef7;"
              >{{ scope.row.money }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          :current-page="page"
          layout="total,sizes, prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <!-- 导出限制 -->
    <el-dialog
      custom-class="export"
      :visible.sync="exportVisible"
      center
      :title="exportTitle"
      :close-on-click-modal="false"
    >
      <div class="con" v-show="exportFlag == 1">
        <img src="../../assets/img/error.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >当前导出条数超过50000条，暂不支持导出</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：数据中的图片、附件只能以链接的形式导出）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 2">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出中...</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 3">
        <img src="../../assets/img/success.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >导出成功</span
        >
        <span style="font-size:14px;color: #808080;"
          >（注：请到个人导出记录查看并下载）</span
        >
      </div>
      <div class="con" v-show="exportFlag == 4">
        <img class="gundong" src="../../assets/img/loading.png" alt="" />
        <span
          style="font-size:20px;color: #000;font-weight: 800;margin: 18px 0 5px;"
          >版本迭代中，导出暂时无法使用</span
        >
      </div>
      <div class="btn">
        <el-button type="primary" @click="exportAffirm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 点击跑腿费显示内容 -->
    <el-dialog
      custom-class="errandMoney"
      :visible.sync="errandMoneyVisible"
      center
      title="内容"
      :close-on-click-modal="true"
    >
      <span style="font-size: 15px;">{{ content }}</span>
    </el-dialog>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      shopName: "", //商铺名称
      shopPhone: "", //商铺手机号
      userPhone: "", //用户手机号
      activityTitle: "", //优惠活动
      orderNumber: "", //订单号
      startTime: "", //开始时间：
      endTime: "", //截止时间：
      flag: "", //异常订单

      limit: 10,
      page: 1,
      tableDataLoading: false,
      tableData: [],
      totalCount: 10,

      exportVisible: false,
      exportTitle: "",
      exportFlag: "",

      errandMoneyVisible: false,
      content: ""
    };
  },
  methods: {
    // 获取数据列表
    getList() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("shop/shopmoney/accountEntryManagement"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          shopName: this.shopName,
          shopPhone: this.shopPhone,
          userPhone: this.userPhone,
          couponName: this.activityTitle,
          orderNumber: this.orderNumber,
          startTime: this.startTime,
          endTime: this.endTime,
          flag:this.flag
        })
      }).then(({ data }) => {
        console.log(data, "入账管理");
        if (data.code == 0) {
          this.tableDataLoading = false;
          this.tableData = data.data.list;
          this.totalCount = data.data.totalCount;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    phoneSelect() {
      this.page = 1;
      this.getList();
    },
    cleans() {
      this.shopName = ""; //商铺名称
      this.shopPhone = ""; //商铺手机号
      this.userPhone = ""; //用户手机号
      this.activityTitle = ""; //优惠活动
      this.orderNumber = ""; //订单号
      this.startTime = ""; //开始时间：
      this.endTime = ""; //截止时间：
      this.page = 1;
      this.getList();
    },
    abnormity() {
      this.page = 1;
      this.$http({
        url: this.$http.adornUrl("shop/shopmoney/accountEntryAbnormal"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          shopName: this.shopName,
          shopPhone: this.shopPhone,
          userPhone: this.userPhone,
          couponName: this.activityTitle,
          orderNumber: this.orderNumber,
          startTime: this.startTime,
          endTime: this.endTime
        })
      }).then(({ data }) => {
        console.log(data, "查询异常订单");
        if (data.code == 0) {
          this.tableDataLoading = false;
          this.tableData = data.data.list;
          this.totalCount = data.data.totalCount;
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 导出
    exportList() {
      console.log(this.totalCount, "导出条数");
      this.exportTitle = "导出";
      // this.exportFlag = 4;
      this.exportVisible = true;
      if (this.totalCount >= 50000) {
        this.exportTitle = "导出错误";
        this.exportFlag = 1;
      } else {
        this.exportTitle = "导出";
        this.exportFlag = 2;
        this.exportVisible = true;
        var userId = this.$cookie.get("userId");
        this.$http({
          url: this.$http.adornUrl("admin/export/excelAccountEntry"),
          method: "get",
          // responseType: "blob",
          params: this.$http.adornParams({
            // 'page': page,
            // 'size': this.size,
            userId: userId,
            shopName: this.shopName,
            shopPhone: this.shopPhone,
            userPhone: this.userPhone,
            couponName: this.activityTitle,
            orderNumber: this.orderNumber,
            startTime: this.startTime,
            endTime: this.endTime,
            flag:this.flag
          })
        }).then(({ data }) => {
          console.log(data, "导出");
          if (data.code == 0) {
            this.exportTitle = "导出成功";
            this.exportFlag = 3;
          }
          // let blob = new Blob([data], {
          //   type:
          //     "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          // });
          // if (window.navigator.msSaveOrOpenBlob) {
          //   navigator.msSaveBlob(blob);
          // } else {
          //   let url = window.URL.createObjectURL(blob);
          //   let elink = document.createElement("a");
          //   elink.download = "订单列表.xlsx";
          //   elink.style.display = "none";
          //   elink.href = url;
          //   document.body.appendChild(elink);
          //   elink.click();
          //   document.body.removeChild(elink);
          // }
        });
      }
    },
    exportAffirm() {
      this.exportVisible = false;
    },
    // tabs切换
    handleClick(tab, event) {
      if (tab._props.label == "入账管理") {
        this.page = 1;
        this.limit = 10;
        this.getList();
      }
    },
    errandMoneyClick(row) {
      console.log(row);
      this.errandMoneyVisible = true;
      this.content = row.content;
    }
  },

  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
/* 导出限制 */
.el-tabs >>> .export {
  width: 500px;
}
.el-tabs >>> .export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.el-tabs >>> .export .con .gundong {
  animation: gundong 3s linear infinite;
}
@keyframes gundong {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    transform: rotate(0deg);
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    transform: rotate(360deg);
  }
}
.el-tabs >>> .export img {
  width: 70px;
}
.el-tabs >>> .export .btn {
  display: flex;
  flex-direction: row-reverse;
}

.el-tabs >>> .errandMoney {
  width: 450px;
}
</style>