HM21St_Page_Manager/src/views/finance_manage/RefundManager.vue

<template>
  <div class="manage-root">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div class="manage-root-contain-right">
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
        ></breadcrumb>
        <div class="personal-inner">
          <div class="search-box">
            <div class="search-item">
              <label>搜索</label>
              <el-input
                placeholder="退款申请人姓名"
                v-model="searchInput"
                maxlength="200"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="getList(1)"
                  style="cursor: pointer"
                ></i>
              </el-input>
            </div>
            <div class="search-item">
              <label>退款申请状态</label>
              <el-select
                v-model="searchStatus"
                @change="getList(1)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in transactionList"
                  :key="item.status"
                  :label="item.status_name"
                  :value="item.status"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <el-table
            class="search-table"
            :data="tableData"
            style="width: 100%"
            @sort-change="handleSort"
            :default-sort="dataSort"
            :max-height="tableHeight"
            v-loading="tableLoading"
          >
            <el-table-column
              type="index"
              label="#"
              sortable
              width="54"
              :index="(pageNumber - 1) * pageSize + 1"
            >
            </el-table-column>
            <el-table-column prop="sn" label="申请单号" width="190">
            </el-table-column>
            <el-table-column prop="order_sn" label="订单号" width="190">
            </el-table-column>
            <el-table-column prop="order_name" label="购买商品" min-width="220">
            </el-table-column>
            <el-table-column prop="goods_type" label="商品类型" width="128">
              <template slot-scope="scope">
                <span
                  class="items-type"
                  :style="{
                    background: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].bg
                      : '',
                    color: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].color
                      : '',
                  }"
                  >{{ scope.row.goods_type_name }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="is_reservation" label="是否预定" width="80">
              <template slot-scope="scope">
                {{ scope.row.is_reservation_order === "true" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="goods_study_phase_name"
              label="学段"
              width="64"
            >
            </el-table-column>
            <el-table-column prop="order_amount" label="订单金额" width="140">
              <template slot-scope="scope">
                <span class="currectPrice"
                  >￥{{ scope.row.order_amount | cutMoneyFiter }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="order_pay_time"
              label="订单支付时间"
              sortable="custom"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="person_name"
              label="购买者"
              sortable="custom"
              width="109"
            >
            </el-table-column>
            <el-table-column
              prop="person_city_name"
              label="客户所在省市"
              width="164"
            >
              <template slot-scope="scope">
                {{
                  scope.row.person_province_name +
                  "/" +
                  scope.row.person_city_name
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="person_org_name"
              label="客户所在机构"
              sortable="custom"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="submit_time"
              label="提交申请时间"
              sortable="custom"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="status" label="退款申请状态" width="112">
              <template slot-scope="scope">
                <div class="status-box">
                  <span
                    :style="{
                      background: refundStatusList[scope.row.status].bg,
                    }"
                  ></span>
                  <b
                    :style="{
                      color: refundStatusList[scope.row.status].textColor,
                    }"
                    >{{ refundStatusList[scope.row.status].text }}</b
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="auditor_name" label="审核人" width="104">
            </el-table-column>
            <el-table-column prop="audit_time" label="审核时间" width="180">
            </el-table-column>
            <el-table-column prop="refund_amount" label="退款金额" width="144">
              <template slot-scope="scope" v-if="scope.row.status === 2">
                <span class="currectPrice"
                  >￥{{ scope.row.refund_amount | cutMoneyFiter }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="refund_transaction_sn"
              label="退款交易流水号"
              width="260"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope" v-if="scope.row.status === 0">
                <el-button
                  type="text"
                  size="small"
                  class="primary-btn"
                  @click.native.prevent="handleRefund(scope.row, scope.$index)"
                >
                  退款
                </el-button>
                <el-button
                  @click.native.prevent="handleRefuse(scope.row, scope.$index)"
                  type="text"
                  size="small"
                  class="red-btn"
                >
                  拒绝
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNumber"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total_count"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="退款信息" :visible.sync="dialogVisible" width="500px">
      <template v-if="ktjeInfo">
        <span style="margin-right: 5px">可退金额：</span>
        <el-input v-model="ktje"></el-input>
        <p>可退商品信息</p>
        <div class="item-info">
          <label>物品类型：</label><span>{{ ktjeInfo.goods_type_name }}</span>
        </div>
        <div class="item-info">
          <label>物品学段：</label
          ><span>{{ ktjeInfo.goods_study_phase_name }}</span>
        </div>
        <div class="item-info">
          <label>订单金额：</label
          ><span>￥{{ ktjeInfo.order_amount | cutMoneyFiter }}</span>
        </div>
        <!-- 物品实体 -->
        <template v-if="ktjeInfo.order_sale_model === 0">
          <div
            class="item-info"
            v-if="ktjeInfo.is_reservation_order === 'true'"
          >
            <label>订阅期数：</label
            ><span>{{
              ktjeInfo.period_count === -1 ? "年刊" : ktjeInfo.period_count
            }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count !== -1
            "
          >
            <label>订阅列表：</label
            ><span>{{ ktjeInfo.issue_no_list_reservation.join("、") }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.issue_no_list_my_goods.length > 0
            "
          >
            <label>已上架：</label
            ><span>{{ ktjeInfo.issue_no_list_my_goods.join("、") }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>开始日期：</label
            ><span>{{ ktjeInfo.valid_period_begin_date }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>截止日期：</label
            ><span>{{ ktjeInfo.valid_period_end_date }}</span>
          </div>
          <div
            class="item-info"
            v-if="
              ktjeInfo.is_reservation_order === 'true' &&
              ktjeInfo.period_count === -1
            "
          >
            <label>当前日期：</label><span>{{ ktjeInfo.cur_date }}</span>
          </div>
        </template>
        <!-- 使用期限 -->
        <template v-if="ktjeInfo.order_sale_model === 1">
          <div class="item-info">
            <label>订单日期：</label><span>{{ ktjeInfo.order_date }}</span>
          </div>
          <div class="item-info">
            <label>有效期天数：</label
            ><span>{{ ktjeInfo.valid_period_day_count }}</span>
          </div>
          <div class="item-info">
            <label>截止日期：</label
            ><span>{{ ktjeInfo.valid_period_end_date }}</span>
          </div>
          <div class="item-info">
            <label>当前日期：</label><span>{{ ktjeInfo.cur_date }}</span>
          </div>
        </template>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureRefund"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import { getLogin } from "@/api/ajax";
import { mapState } from "vuex";
import { cutMoneyFiter } from "@/utils/defined";
import { getToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "refund_manage",
      breadcrumbList: [
        {
          icon: "money-cny-box-line",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          notLink: true,
          text: "财务中心",
        },
        {
          icon: "",
          url: "",
          text: "退款管理",
        },
      ],
      quickList: [], // 快速查询
      searchInput: "",
      searchQuick: null,
      quickIndex: null, // 快速搜索的索引
      proceedsNumber: "", // 收款单数
      proceedsPrice: null, // 收款金额
      proceedsPriceArr: [],
      searchType: -1,
      validity: "",
      searchStudy: -1,
      searchStatus: -1,
      searchGoodsType: -1,
      searchIsCDKEY: -1,
      searchOrgid: "",
      searchArea: [],
      searchChannel: -1,
      channelList: [
        {
          label: "全部",
          value: -1,
        },
        {
          label: "支付宝",
          value: 4,
        },
        {
          label: "微信支付",
          value: 3,
        },
      ],
      orgList: [
        {
          name: "全部",
          id: "",
        },
      ],
      isCDKEYList: [
        {
          label: "全部",
          value: -1,
        },
        {
          label: "已使用",
          value: 1,
        },
        {
          label: "未使用",
          value: 0,
        },
      ], // 是否使用兑换码
      transactionList: [
        {
          status_name: "全部",
          status: -1,
        },
        {
          status_name: "待审核",
          status: 0,
        },
        {
          status_name: "驳回",
          status: 1,
        },
        {
          status_name: "审核通过",
          status: 2,
        },
      ], //交易状态列表
      transactionListCss: {
        0: {
          bg: "rgb(245, 63, 63)",
          text: "未支付",
        },
        1: {
          bg: "#00B42A",
          text: "支付成功",
        },
        2: {
          bg: "#165DFF",
          text: "兑换成功",
        },
        3: {
          bg: "#F7BA1E",
          text: "已退款",
        },
        4: {
          bg: "#FF7D00",
          text: "已撤回",
        },
      },
      goodsTypeList: [
        {
          goods_name: "全部",
          value: -1,
        },
        {
          goods_name: "报纸",
          value: 2,
        },
        {
          goods_name: "精读",
          value: 3,
        },
        {
          goods_name: "录播课",
          value: 0,
        },
        {
          goods_name: "画刊",
          value: 4,
        },
      ], // 商品类型
      goodsTypeListCss: {
        2: {
          text: "报纸",
          color: "#165DFF",
          bg: "#E8F7FF",
        },
        4: {
          text: "画刊",
          color: "#F53F3F",
          bg: "#FFECE8",
        },
        3: {
          text: "精读",
          color: "#0FC6C2",
          bg: "#E8FFFB",
        },
        0: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        1: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        10: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        // '5':{
        //     text:'报纸专辑',
        //     color:'#165DFF',
        //     bg:'#E8F7FF'
        // },
        // '6':{
        //     text:'画刊专辑',
        //     color:'#F53F3F',
        //     bg:'#FFECE8'
        // }
      },
      typeList: [
        {
          account_type: -1,
          account_type_name: "全部",
        },
      ],
      statusList: {
        1: {
          text: "正常",
          bg: "#165DFF",
          color: "",
        },
        0: {
          text: "停用",
          bg: "#F53F3F",
          color: "#F53F3F",
        },
      },
      refundStatusList: {
        2: {
          text: "审核通过",
          bg: "#00B42A",
          textColor: "#1D2129",
        },
        0: {
          text: "待审核",
          bg: "#165DFF",
          textColor: "#1D2129",
        },
        1: {
          text: "驳回",
          bg: "#FF7D00",
          textColor: "#1D2129",
        },
      },
      tableData: [],
      pageSize: window.localStorage.getItem("pageSize")
        ? Number(window.localStorage.getItem("pageSize"))
        : 10,
      pageNumber: window.localStorage.getItem("pageNumber")
        ? Number(window.localStorage.getItem("pageNumber"))
        : 1,
      tableHeight: "", // 表格高度
      total_count: 0,
      dataSort: {},
      props: { multiple: true },
      tableLoading: false,
      exportLoading: false,
      exportFlag:
        getToken() && JSON.parse(getToken())
          ? JSON.parse(getToken()).popedom_code_list.indexOf(40002) > -1
          : false,
      dialogVisible: false,
      ktje: 0,
      refundId: "",
      ktjeInfo: null,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$studyTypeAll", "$provinceCityListAll"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    qucikSearch(value, index) {
      (this.validity = [value.date_begin, value.date_end]),
        (this.quickIndex = index);
      this.getList();
    },
    handleSort(value) {
      let dataSort = {
        prop: value.prop,
        order: value.order,
      };
      this.dataSort = dataSort;
      this.getList();
    },
    // 查询列表
    getList(page) {
      this.tableLoading = true;
      if (page) {
        this.pageNumber = page;
      }
      let MethodName =
        "/ShopServer/Manager/FinanceManager/PageQueryOrderRefundApplyList";
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        } else {
          order_column_list = ["submit_time:desc"];
        }
      } else {
        order_column_list = ["submit_time:desc"];
      }

      let data = {
        person_name: this.searchInput.trim(),
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        status: this.searchStatus,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.tableData = res.apply_list;
            this.total_count = res.total_count;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 拒绝
    handleRefuse(row, index) {
      this.$confirm("确定拒绝退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let Mname =
            "/ShopServer/Manager/FinanceManager/AuditOrderRefundApply";
          let updataData = JSON.parse(JSON.stringify(row));
          let data = {
            id: row.id,
            is_pass: "false",
          };
          getLogin(Mname, data).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 退款
    handleRefund(row, index) {
      this.ktjeInfo = null;
      let Mnames =
        "/ShopServer/Manager/FinanceManager/GetOrderRefundApplyKTJEInfo";
      let datas = {
        id: row.id,
      };
      getLogin(Mnames, datas).then((res) => {
        if (res.status === 1) {
          this.ktje = res.ktje_info.ktje;
          this.ktjeInfo = res.ktje_info;
          this.refundId = row.id;
          this.dialogVisible = true;
        }
      });
      // this.$prompt("请输入金额", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      // })
      //   .then(({ value }) => {
      //
      //   })
      //   .catch(() => {
      //     // this.$message({
      //     //   type: "info",
      //     //   message: "取消输入",
      //     // });
      //   });
    },
    // 确定退款
    sureRefund() {
      this.$confirm("确定要退款吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let Mname = "/ShopServer/Manager/FinanceManager/AuditOrderRefundApply";
        let data = {
          id: this.refundId,
          is_pass: "true",
          refund_amount: this.ktje,
        };
        getLogin(Mname, data).then((res) => {
          this.$message.success("操作成功");
          this.getList();
          this.dialogVisible = false;
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNumber = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getList();
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 370; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 用户类型列表
    getOrgList() {
      let MethodName = "/OrgServer/Client/OrgManager/GetOrgIndexList";
      let data = {
        name: "",
        status: 1,
        sn: "",
      };
      getLogin(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.orgList = [
              {
                name: "全部",
                id: "",
              },
            ];
            this.orgList = this.orgList.concat(res.org_index_list);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 快捷时间按钮列表
    getQuickList() {
      this.quickList = [];
      let MethodName =
        "/ShopServer/Manager/FinanceManager/GetQueryCritDateSpaceList";
      let data = {};
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.quickList = res.date_space_list;
        }
      });
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
    this.getQuickList();
    this.getOrgList();
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    let input = document.querySelector("input");
    input.addEventListener("keyup", function (event) {
      // 判断是否按下回车键
      if (event.keyCode === 13) {
        // 回车键被按下，执行你想要的操作
        _this.getList(1);
      }
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
</style>
<style lang="scss">
.btn-box {
  display: flex;
}
.quick-search {
  display: flex;
  list-style: none;
  padding: 3px;
  margin: 0 24px;
  align-items: center;
  border-radius: 2px;
  background: #f2f3f5;
  li {
    display: flex;
    align-items: center;
    a {
      padding: 2px 12px;
      color: #4e5969;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      border-radius: 2px;
      cursor: pointer;
      &.active {
        background: #fff;
        color: #165dff;
        font-weight: 500;
      }
    }
    span {
      height: 14px;
      width: 1px;
      background: #e5e6eb;
      &.border-no {
        background: #f2f3f5;
      }
    }
  }
}
.proceeds-box {
  border-radius: 2px;
  background: #f7f8fa;
  padding: 16px;
  margin-top: 24px;
  h6 {
    color: #1d2129;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 8px 0;
    span {
      color: #86909c;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }
  label {
    color: #1d2129;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    b {
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
    }
    span {
      color: #4e5969;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
  }
}
.el-range-editor--small .el-range-input {
  background: #f2f3f5;
}
.search-item {
  margin-bottom: 20px;
}
.search-table {
  margin-top: 0;
}
.items-type {
  padding: 1px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  border-radius: 2px;
}
.code {
  color: #175dff;
}
.copy {
  color: #c9cdd4;
  margin-left: 8px;
  cursor: pointer;
}
.item-info {
  display: flex;
  width: 100%;
  margin: 10px 0;
  label {
    width: 90px;
    text-align: right;
    flex-shrink: 0;
  }
}
</style>