boss/pages/main/index/wait_expend.vue

<template>
  <div v-if="jobData && packageData && hireData">
<!--    <div-->
<!--      class="header"-->
<!--    >云端托管：{{jobData.sumJob.totalAmount/100}}元，整包托管：{{packageData.sumPackage.totalAmount/100}}元，雇佣托管：{{hireData.sumHire.totalAmount/100 || 0}}元</div>-->
    <div
      class="header"
    >全站待支出总金额{{ ((jobData.sumJob.totalAmount/100) + (packageData.sumPackage.totalAmount/100)+(hireData.sumHire.totalAmount/100 || 0)+(frozenCoins * 1) +(balanceTotal/100)+(incomeTotal/100)).toFixed(2)}}元</div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="云端" name="job">
        <div
          class="tab-header"
        >云端项目待支出总额{{jobData.sumJob.totalAmount/100}}元，共{{jobData.sumJob.totalNum}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportZhichuList(9)" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="jobData.orders" border :stripe="true">
            <el-table-column prop="product_title" label="订单名称" width="150" />
            <el-table-column prop="user_info.nickname" label="用户" />
            <el-table-column prop="real_amount_yuan" label="实际金额" />
            <el-table-column prop="real_amount" label="收支类型">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount_yuan)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" />
            <el-table-column prop="order_state_name" label="订单状态" />
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号">
              <template slot-scope="scope">
                <nuxt-link
                  target="_blank"
                  :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                >{{scope.row.order_no}}</nuxt-link>
              </template>
            </el-table-column>
            <el-table-column prop="out_order_id" label="支付编号" />
            <el-table-column prop="product_type_name" label="订单类型" />
            <el-table-column prop="order_type_name" label="交易类型" />
            <el-table-column label="关联项目">
              <template slot-scope="scope">
                <a
                  :href="scope.row.related_project.url?scope.row.related_project.url:'#'"
                  target="_blank"
                >
                  <span
                    class="lblue"
                  >{{scope.row.related_project.name?scope.row.related_project.name:"--"}}</span>
                </a>
              </template>
            </el-table-column>
            <el-table-column label="人工">
              <template slot-scope="scope">
                <span v-if="scope.row.operator_info.nickname">{{scope.row.operator_info.nickname}}</span>
                <span>({{scope.row.operator_uid}})</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="Number(jobData.sumJob.totalNum)"
          @current-change="handleJobCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="整包" name="package">
        <div
          class="tab-header"
        >整包项目待支出总额{{packageData.sumPackage.totalAmount/100}}元，共{{packageData.sumPackage.totalNum}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportZhichuList(2)" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="packageData.orders" border :stripe="true">
            <el-table-column prop="product_title" label="订单名称" width="150" />
            <el-table-column prop="user_info.nickname" label="用户" />
            <el-table-column prop="real_amount_yuan" label="实际金额" />
            <el-table-column prop="real_amount" label="收支类型">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount_yuan)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" />
            <el-table-column prop="order_state_name" label="订单状态" />
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号">
              <template slot-scope="scope">
                <nuxt-link
                  target="_blank"
                  :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                >{{scope.row.order_no}}</nuxt-link>
              </template>
            </el-table-column>
            <el-table-column prop="out_order_id" label="支付编号" />
            <el-table-column prop="product_type_name" label="订单类型" />
            <el-table-column prop="order_type_name" label="交易类型" />
            <el-table-column label="关联项目">
              <template slot-scope="scope">
                <a
                  :href="scope.row.related_project.url?scope.row.related_project.url:'#'"
                  target="_blank"
                >
                  <span
                    class="lblue"
                  >{{scope.row.related_project.name?scope.row.related_project.name:"--"}}</span>
                </a>
              </template>
            </el-table-column>
            <el-table-column label="人工">
              <template slot-scope="scope">
                <span v-if="scope.row.operator_info.nickname">{{scope.row.operator_info.nickname}}</span>
                <span>({{scope.row.operator_uid}})</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="Number(packageData.sumPackage.totalNum)"
          @current-change="handlePackageCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="雇佣" name="hire">
        <div
          class="tab-header"
        >整包项目待支出总额{{hireData.sumHire.totalAmount/100}}元，共{{hireData.sumHire.totalNum}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportZhichuList(4)" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="hireData.orders" border :stripe="true">
            <el-table-column prop="product_title" label="订单名称" width="150" />
            <el-table-column prop="user_info.nickname" label="用户" />
            <el-table-column prop="real_amount_yuan" label="实际金额" />
            <el-table-column prop="real_amount" label="收支类型">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" />
            <el-table-column prop="order_state_name" label="订单状态" />
            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号">
              <template slot-scope="scope">
                <nuxt-link
                  target="_blank"
                  :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                >{{scope.row.order_no}}</nuxt-link>
              </template>
            </el-table-column>
            <el-table-column prop="out_order_id" label="支付编号" />
            <el-table-column prop="product_type_name" label="订单类型" />
            <el-table-column prop="order_type_name" label="交易类型" />
            <el-table-column label="关联项目">
              <template slot-scope="scope">
                <a
                  :href="scope.row.related_project.url?scope.row.related_project.url:'#'"
                  target="_blank"
                >
                  <span
                    class="lblue"
                  >{{scope.row.related_project.name?scope.row.related_project.name:"--"}}</span>
                </a>
              </template>
            </el-table-column>
            <el-table-column label="人工">
              <template slot-scope="scope">
                <span v-if="scope.row.operator_info.nickname">{{scope.row.operator_info.nickname}}</span>
                <span>({{scope.row.operator_uid}})</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="Number(hireData.sumHire.totalNum)"
          @current-change="handleHireCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="待解冻" name="frozen">
        <div
          class="tab-header"
        >用户冻结账户待解冻余额总额{{frozenCoins}}元，共{{waitUnfrozenCount}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportFrozenList" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="frozenData" border style="width: 100%">
            <el-table-column label="项目名称">
              <template slot-scope="scope">
                <!-- @click="clickDev(scope.row.uid)"  -->
                <span class="lblue point">
              <a :href="scope.row.url" target="_blank">{{scope.row.name}}</a>
            </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户">
              <template slot-scope="scope">
            <span class="lblue point">
              <a
                :href="scope.row.user_url"
                target="_blank"
              >{{scope.row.nickname}}({{scope.row.uid}})</a>
            </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="关联订单ID">
              <template slot-scope="scope">
                <span>{{scope.row.order_no}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="类型">
              <template slot-scope="scope">
                <span>{{scope.row.target_type_name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="冻结金额">
              <template slot-scope="scope">
                <span>{{scope.row.coins}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="冻结方式">
              <template slot-scope="scope">
                <span>{{scope.row.end_time_type_name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="创建日期">
              <template slot-scope="scope">
                <span>{{scope.row.create_time}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="解冻日期">
              <template slot-scope="scope">
                <span>{{scope.row.end_time}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="当前状态">
              <template slot-scope="scope">
                <span>{{scope.row.status_name}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="frozenCount"
          @current-change="handlefrozenCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="客栈余额待提现" name="balance">
        <div
          class="tab-header"
        >用户客栈账户余额待提现总额{{balanceTotal/100}}元，共{{balanceCount}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportBalanceList" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="balanceData" border style="width: 100%">

            <el-table-column prop="name" label="用户">
              <template slot-scope="scope">
            <span class="lblue point">
              <a
                :href="scope.row.user_url"
                target="_blank"
              >{{scope.row.nickname}}({{scope.row.uid}})</a>
            </span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="可用余额">
              <template slot-scope="scope">
                <span>{{scope.row.total_balance/100}}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="balanceCount"
          @current-change="handlebalanceCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="薪资余额待提现" name="income">
        <div
          class="tab-header"
        >用户客栈账户余额待提现总额{{incomeTotal/100}}元，共{{incomeCount}}笔</div>
        <div style="text-align: right;margin-bottom: 10px">
          <el-button @click="exportIncomeList" class="export-excel" type="primary">导出报表</el-button>
        </div>
        <div class="tab-content">
          <el-table :data="incomeData" border style="width: 100%">

            <el-table-column prop="name" label="用户">
              <template slot-scope="scope">
            <span class="lblue point">
              <a
                :href="scope.row.user_url"
                target="_blank"
              >{{scope.row.nickname}}({{scope.row.uid}})</a>
            </span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="可用余额">
              <template slot-scope="scope">
                <span>{{scope.row.income_tax_balance/100}}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="10"
          :total="incomeCount"
          @current-change="handleincomeCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "job",
      jobPage: 1,
      jobData: "",
      packagePage: 1,
      packageData: "",
      hirePage: 1,
      hireData: "",
      //待解冻
      frozenPage:1,
      frozenCount:0,
      frozenCoins:0,
      waitUnfrozenCount:0,
      frozenData:[],
      //余额
      balancePage:1,
      balanceCount:0,
      balanceTotal:0,
      balanceData:[],
      //薪资
      incomePage:1,
      incomeCount:0,
      incomeTotal:0,
      incomeData:[],
    };
  },
  mounted() {
    this.activeName = this.$route.query.activeName || "job";
    this.getJobOrders();
    this.getPackageOrders();
    this.getHireOrders();
    this.getFrozenOrders();
    this.getBalanceOrders();
    this.getIncomeOrders();
  },
  methods: {
    async getJobOrders() {
      const data = {
        page: this.jobPage,
        pageSize: 10,
        productType: 9
      };
      let res = await this.$post("/api/admin/order/getWaitExpenseOrders", data);
      if (res) {
        this.jobData = res.data;
        // console.log(this.jobData)
      }
    },
    async exportZhichuList(type){
      let url = window.location.host + "/api/admin/order/exportZhichu?productType="+type;
      window.location.href = "https://" + url;
    },
    async getPackageOrders() {
      const data = {
        page: this.packagePage,
        pageSize: 10,
        productType: 2
      };
      let res = await this.$post("/api/admin/order/getWaitExpenseOrders", data);
      if (res) {
        this.packageData = res.data;
        // console.log(this.packageData)
      }
    },
    async getHireOrders() {
      const data = {
        page: this.hirePage,
        pageSize: 10,
        productType: 4
      };
      let res = await this.$post("/api/admin/order/getWaitExpenseOrders", data);
      if (res) {
        this.hireData = res.data;
        // console.log(this.hireData)
      }
    },
    //待解冻订单
    async getFrozenOrders() {
      const data = {
        page: this.frozenPage,
        size: 10,
        status: 1
      };
      let res = await this.$post("/api/admin/order/get_frozen_coins", data);
      if (res) {
        this.frozenData = res.data.list;
        this.frozenCount = res.data.totalCount * 1;
        this.frozenCoins = res.data.waitUnfrozenCoins;
        this.waitUnfrozenCount = res.data.waitUnfrozenCount;
      }
    },
    async exportFrozenList(){
      let url = window.location.host + "/api/admin/order/exportFrozen?status=1";
      window.location.href = "https://" + url;
    },
    //账户余额
    async getBalanceOrders() {
      const data = {
        page: this.balancePage,
        size: 10,
      };
      let res = await this.$post("/api/admin/UserFinancial/getBalanceList", data);
      if (res.status === 1) {
        this.balanceData = res.data.list || [];
        this.balanceCount = res.data.total * 1;
        this.balanceTotal = res.data.totalBalance * 1;

      }
    },
    async exportBalanceList(){
      let url = window.location.host + "/api/admin/UserFinancial/exportBalance";
      window.location.href = "https://" + url;
    },
    //薪资余额
    async getIncomeOrders() {
      const data = {
        page: this.incomePage,
        size: 10,
      };
      let res = await this.$post("/api/admin/UserFinancial/getIncomeList", data);
      if (res.status === 1) {
        this.incomeData = res.data.list || [];
        this.incomeCount = res.data.total * 1;
        this.incomeTotal = res.data.totalIncome * 1;

      }
    },
    async exportIncomeList(){
      let url = window.location.host + "/api/admin/UserFinancial/exportIncome";
      window.location.href = "https://" + url;
    },
    handleClick(tab, event) {
      return;
      switch (tab.name){
        case 'frozen':
          this.getFrozenOrders();
          break;
      }
    },
    handleJobCurrentChange(val) {
      this.jobPage = val;
      this.getJobOrders();
    },
    handlePackageCurrentChange(val) {
      this.packagePage = val;
      this.getPackageOrders();
    },
    handleHireCurrentChange(val) {
      this.hirePage = val;
      this.getHireOrders();
    },
    handlefrozenCurrentChange(val) {
      this.frozenPage = val;
      this.getFrozenOrders();
    },
    handleincomeCurrentChange(val) {
      this.incomePage = val;
      this.getIncomeOrders();
    },
    handlebalanceCurrentChange(val) {
      this.balancePage = val;
      this.getBalanceOrders();
    },
    formatDate(time) {
      var now = new Date(time * 1000);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.tab-header {
  margin-bottom: 10px;
  line-height: 1.5;
}

.tab-content {
  white-space: nowrap;
  overflow-x: scroll;
  height: calc(100vh - 300px);
}

.order-footer {
  margin-top: 10px;
}
.el-form-item {
  margin-bottom: 0;
}
.el-form:last-child {
  margin-bottom: 22px;
}
</style>