boss/pages/main/index/wait_expend.vue

<template>
  <div v-if="jobData && packageData && hireData">
    <div class="header">云端托管：{{jobData.sumJob.totalAmount}}元，整包托管：{{packageData.sumPackage.totalAmount}}元，雇佣托管：{{hireData.sumHire.totalAmount || 0}}元</div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="云端" name="job">
        <div class="tab-header">云端项目待支出总额{{jobData.sumJob.totalAmount}}元，共{{jobData.sumJob.totalNum}}笔</div>
        <div class="tab-content">
          <el-table :data="jobData.orders" border style="width:100%;" height="100%">
            <el-table-column prop="product_title" label="订单名称" width="300"/>
            <el-table-column prop="user_info.nickname" label="用户" width="150"/>
            <el-table-column prop="real_amount" label="实际金额" width="100"/>
            <el-table-column prop="real_amount" label="收支类型" width="100">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" width="100"/>
            <el-table-column prop="order_state_name" label="订单状态" width="100"/>
            <el-table-column label="创建时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" width="100">
              <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="支付编号" width="100"/>
            <el-table-column prop="product_type_name" label="订单类型" width="100"/>
            <el-table-column prop="order_type_name" label="交易类型" width="100"/>
            <el-table-column label="关联项目" width="100">
              <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="人工" width="100">
              <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}}元，共{{packageData.sumPackage.totalNum}}笔</div>
        <div class="tab-content">
          <el-table :data="packageData.orders" border style="width:100%;" height="100%">
            <el-table-column prop="product_title" label="订单名称" width="300"/>
            <el-table-column prop="user_info.nickname" label="用户" width="150"/>
            <el-table-column prop="real_amount" label="实际金额" width="100"/>
            <el-table-column prop="real_amount" label="收支类型" width="100">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" width="100"/>
            <el-table-column prop="order_state_name" label="订单状态" width="100"/>
            <el-table-column label="创建时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" width="100">
              <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="支付编号" width="100"/>
            <el-table-column prop="product_type_name" label="订单类型" width="100"/>
            <el-table-column prop="order_type_name" label="交易类型" width="100"/>
            <el-table-column label="关联项目" width="100">
              <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="人工" width="100">
              <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}}元，共{{hireData.sumHire.totalNum}}笔</div>
        <div class="tab-content">
          <el-table :data="hireData.orders" border style="width:100%;" height="100%">
            <el-table-column prop="product_title" label="订单名称" width="300"/>
            <el-table-column prop="user_info.nickname" label="用户" width="150"/>
            <el-table-column prop="real_amount" label="实际金额" width="100"/>
            <el-table-column prop="real_amount" label="收支类型" width="100">
              <template slot-scope="scope">
                <span>{{parseInt(scope.row.real_amount)>=0?"收入":"支出"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="channel_name" label="支付方式" width="100"/>
            <el-table-column prop="order_state_name" label="订单状态" width="100"/>
            <el-table-column label="创建时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.created_at)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间" width="100">
              <template slot-scope="scope">
                <span>{{formatDate(scope.row.pay_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" width="100">
              <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="支付编号" width="100"/>
            <el-table-column prop="product_type_name" label="订单类型" width="100"/>
            <el-table-column prop="order_type_name" label="交易类型" width="100"/>
            <el-table-column label="关联项目" width="100">
              <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="人工" width="100">
              <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-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'job',
      jobPage: 1,
      jobData: '',
      packagePage: 1,
      packageData: '',
      hirePage: 1,
      hireData: '',
    }
  },
  mounted() {
    this.activeName = this.$route.query.activeName || 'job'
    this.getJobOrders()
    this.getPackageOrders()
    this.getHireOrders()
  },
  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 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)
      }
    },
    handleJobCurrentChange(val) {
      this.jobPage = val
      this.getJobOrders()
    },
    handlePackageCurrentChange(val) {
      this.packagePage = val
      this.getPackageOrders()
    },
    handleHireCurrentChange(val) {
      this.hirePage = val
      this.getHireOrders()
    },
    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>
  .header {
    margin-top: 20px;
    margin-bottom: 30px;
  }

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

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

  .order-footer {
    margin-top: 10px;
  }
</style>