zc_saas_admin/src/views/finance/orderManage/index.vue

<template>
  <div id="orderManage">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="search(2)"
      :remarkStatus="true"
    />
    <picture-list
      ref="pictureList"
      :info="info"
      :list="showTabList"
      @backFunc="pictureFunc"
    ></picture-list>
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <template slot="customize">
        <el-button type="primary" @click="collection">收款信息</el-button>
      </template>
      <template slot="applyFor" slot-scope="props">
        <p>
          创建时间：{{ $methodsTools.onlyForma(props.scope.row.createTime) }}
        </p>
        <p>通过时间：{{ $methodsTools.onlyForma(props.scope.row.payTime) }}</p>
        <p>订单编号：{{ props.scope.row.handleOrderSn }}</p>
        <p>经办姓名：{{ props.scope.row.createUsername }}</p>
        <p>经办身份：{{ props.scope.row.idCard }}</p>
        <p>经办手机：{{ props.scope.row.telphone }}</p>
      </template>
      <template slot="invoice" slot-scope="props">
        <p>
          商品类型：{{
            props.scope.row.goodsType == 1
              ? "课程"
              : props.scope.row.goodsType == 2
              ? "题库"
              : "-"
          }}
        </p>
        <p>教育类型：{{ props.scope.row.educationName }}</p>
        <p>
          培训项目：{{
            props.scope.row.projectName + " - " + props.scope.row.businessName
          }}
        </p>
        <!-- <p>订购人数：{{ props.scope.row.userNum || 0 }}位</p>
        <p>订购数量：{{ props.scope.row.goodsNum || 0 }}个</p> -->
      </template>
      <template slot="invoice1" slot-scope="props">
        <p>下单金额：￥{{ props.scope.row.orderPrice | formatPrice }}</p>
        <p>退款金额：￥{{ props.scope.row.goodsRefund | formatPrice }}</p>
        <p>实际金额：￥{{ props.scope.row.realPrice | formatPrice }}</p>
      </template>
      <template slot="invoice2" slot-scope="props">
        <el-button
          v-if="
            (props.scope.row.payStatus == 1 ||
              props.scope.row.payStatus == 2 ||
              props.scope.row.payStatus == -2) &&
            props.scope.row.payType == 2
          "
          type="text"
          @click="seeZZ(props.scope.row.handleOrderSn)"
          >查看</el-button
        >
      </template>
      <template slot="invoice3" slot-scope="props">
        <span v-if="!props.scope.row.invoiceStatus">未开票</span>
        <span v-if="props.scope.row.invoiceStatus == 1">待审核</span>
        <span v-if="props.scope.row.invoiceStatus == 2">已开票</span>
        <span v-if="props.scope.row.invoiceStatus == 3">不通过</span>
        <span v-if="props.scope.row.invoiceStatus == 4">已失效</span>
        <span v-if="props.scope.row.invoiceUrl && props.scope.row.invoiceStatus == 2"
          >({{ props.scope.row.invoiceUrl.split(",").length }}张)
        </span>
        <div v-if="props.scope.row.invoiceUrl && props.scope.row.invoiceStatus == 2">
          <el-button
            type="text"
            @click="downinvoice(props.scope.row.invoiceUrl.split(','))"
            >下载</el-button
          >
        </div>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="orderDetail(props.scope.row)"
          >查看详情</el-button
        ><el-button
          type="text"
          @click="orderSH(props.scope.row)"
          :disabled="props.scope.row.payStatus !== 2"
          >订单审核</el-button
        ><el-button
          type="text"
          :disabled="props.scope.row.refundStatus !== 0"
          @click="refundFunc(props.scope.row)"
          >退款审核</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <public-transfer ref="publicTransfer" />
    <dialogHandleBank ref="dialogHandleBank" />
    <orderDetail ref="orderDetail" />
    <refundFunc ref="refundFunc" />
  </div>
</template>

<script>
import publicTransfer from "./publicTransfer.vue";
import dialogHandleBank from "./dialogHandleBank.vue";
import orderDetail from "./orderDetail.vue";
import refundFunc from "./refundFunc.vue";
import pictureList from "@/components/Comon/pictureList.vue";
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "",
  components: {
    searchBoxNew,
    tableList,
    pagination,
    pictureList,
    dialogHandleBank,
    orderDetail,
    refundFunc,
    publicTransfer,
  },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "经办订单",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      info: {},
      showTabList: [
        {
          label: "下单金额",
          img: "ContractAmount",
          prop: "payPrice",
        },
        {
          label: "退款金额",
          img: "Refunded",
          prop: "refundPrice",
        },
        {
          label: "实际金额",
          img: "PaymentHasBeenReceived",
          prop: "orderPrice",
        },
        // {
        //   label: "订单数量",
        //   img: "NumberOfOrders2",
        //   prop: "orderNum",
        //   num: true,
        // },
        // {
        //   label: "订单人数",
        //   img: "NumberOfOrders",
        //   prop: "orderUserNum",
        //   num: true,
        // },
        {
          label: "待审订单",
          img: "PendingOrder",
          prop: "unCheckOrderNum",
          num: true,
          color: "#ff7a38",
          hover: false,
        },
        {
          label: "待审退款",
          img: "PendingRefund",
          prop: "unRefundNum",
          num: true,
          color: "#ff7a38",
          hover: false,
        },
      ],
      //搜索
      formList: [
        {
          prop: "goodsType",
          placeholder: "商品类型",
          scope: "select",
          options: [
            { label: "课程", value: 1 },
            { label: "题库", value: 2 },
          ],
        },
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "payStatus",
          placeholder: "订单状态",
          scope: "select",
          options: [
            { label: "待支付", value: 0 },
            { label: "已支付", value: 1 },
            { label: "已关闭", value: -1 },
            { label: "审核中", value: 2 },
            { label: "不通过", value: -2 },
          ],
        },
        {
          prop: "refundStatus",
          placeholder: "退款状态",
          scope: "select",
          options: [
            { label: "待审核", value: 0 },
            { label: "已退款", value: 1 },
            { label: "不通过", value: 2 },
          ],
        },
        {
          prop: "invoiceStatus",
          placeholder: "发票状态",
          scope: "select",
          options: [
            { label: "待审核", value: 1 },
            { label: "已开票", value: 2 },
            { label: "不通过", value: 3 },
            { label: "已失效", value: 4 },
            { label: "未开票", value: 5 },
          ],
        },
        {
          prop1: "startTime",
          prop2: "endTime",
          placeholder1: "通过开始时间",
          placeholder2: "通过结束时间",
          scope: "moreDataPicker",
          Diszing: true,
        },
        {
          prop: "handleOrderSn",
          placeholder: "输入订单编号",
        },
        {
          prop: "telphone",
          placeholder: "输入经办手机",
        },
        {
          prop: "createUsername",
          placeholder: "输入经办姓名",
        },
        {
          prop: "idCard",
          placeholder: "输入经办身份证号",
        }
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
        payStatus: "",
        refundStatus: "",
      },
      // 表单
      tableSet: [
        {
          label: "订单状态",
          prop: "payStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            { label: "待支付", value: 0 },
            { label: "已支付", value: 1 },
            { label: "已关闭", value: -1 },
            { label: "审核中", value: 2 },
            { label: "不通过", value: -2 },
          ],
        },
        {
          label: "订单信息",
          hidden: true,
          scope: "slot",
          slotName: "applyFor",
          dontCenter: true,
        },
        {
          label: "商品信息",
          hidden: true,
          scope: "slot",
          slotName: "invoice",
          dontCenter: true,
        },
        {
          label: "订单金额",
          hidden: true,
          scope: "slot",
          slotName: "invoice1",
          dontCenter: true,
        },
        {
          label: "支付方式",
          prop: "payType",
          hidden: true,
          scope: "isOptions",
          options: [
            { label: "微信支付", value: 1 },
            { label: "对公转账", value: 2 },
          ],
        },
        {
          label: "转账凭证",
          hidden: true,
          scope: "slot",
          slotName: "invoice2",
        },
        {
          label: "发票状态",
          hidden: true,
          scope: "slot",
          slotName: "invoice3",
        },
        {
          label: "退款状态",
          prop: "refundStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            { label: "待审核", value: 0 },
            { label: "已退款", value: 1 },
            { label: "不通过", value: 2 },
          ],
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    pictureFunc(item) {
      if (item.prop == "unCheckOrderNum") {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          payStatus: 2,
          refundStatus: "",
        };
        this.search();
      }
      if (item.prop == "unRefundNum") {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          payStatus: "",
          refundStatus: 0,
        };
        this.search();
      }
    },
    seeZZ(sn) {
      this.$refs.publicTransfer.openBoxs(sn);
    },
    collection() {
      this.$refs.dialogHandleBank.openBoxs();
    },
    //退款审核
    refundFunc(row) {
      this.$refs.refundFunc.openBoxs(row.handleOrderSn);
    },
    orderSH(row) {
      this.$refs.orderDetail.openBoxs(row.handleOrderSn, true);
    },
    //查看详情
    orderDetail(row) {
      this.$refs.orderDetail.openBoxs(row.handleOrderSn);
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          payStatus: "",
          refundStatus: "",
        };
      }
      this.$api
        .orderhandlelist(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
      let obj = JSON.parse(JSON.stringify(this.formData));
      delete obj.pageNum;
      delete obj.pageSize;
      this.$api.orderhandlestatistics(obj).then((res) => {
        this.info = res.data || {};
      });
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    downinvoice(ary) {
      for (let i = 0; i < ary.length; i++) {
        this.download(this.$methodsTools.splitImgHost(ary[i]));
      }
    },
    //下载
    download(url, fileName = "") {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.setRequestHeader("Content-Type", `application/pdf`);
      xhr.responseType = "blob";
      let that = this;
      xhr.onload = function () {
        if (this.status == 200) {
          //接受二进制文件流
          var blob = this.response;
          that.downloadExportFile(blob, fileName);
        }
      };
      xhr.send();
    },

    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = "";
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download = tagFileName;
      //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
  },
};
</script>

<style lang="less" scoped></style>