boss/pages/main/index/artificial_orders.vue

<template>
  <div id="cloud-balance">
    <!-- <section class="top"> -->
    <!-- <h3>交易订单中心</h3> -->
    <!-- <section> -->
    <div class="type-boxs">
      <div class="clear">
        <div class="floatr">
          <el-button type="primary" @click="createOrder()">新增订单</el-button>
          <el-button @click="downFinanceList">导出报表</el-button>
        </div>
      </div>
    </div>
    <!-- </section> -->
    <!-- </section> -->
    <div class="trcenter" style="height: calc(100%) ">
      <!-- height="250" -->
      <el-table :data="finaceList" border style="width: 100%;" height="100%">
        <el-table-column label="订单名称">
          <template slot-scope="scope">
            <!-- @click="clickDev(scope.row.uid)"  -->
            <span class="lblue point">
              <nuxt-link
                :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
              >{{scope.row.product_title}}</nuxt-link>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="用户">
          <template slot-scope="scope">{{scope.row.user_info.nickname}}({{scope.row.uid }})</template>
        </el-table-column>
        <el-table-column label="实际金额">
          <template slot-scope="scope">
            <span
              v-if="parseInt(scope.row.real_amount)>=0"
              class="green"
            >+{{(scope.row.real_amount/100).toFixed(2)}}</span>
            <span v-else class="orange">{{(scope.row.real_amount/100).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收支类型">
          <template slot-scope="scope">
            <span>{{parseInt(scope.row.real_amount)>=0?"收入":"支出"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="支付方式"></el-table-column>
        <el-table-column prop="order_state_name" label="交易状态">
          <template slot-scope="scope">
            <span>{{scope.row.order_type_name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_state_name" width="100" label="订单状态">
          <template slot-scope="scope">
            {{scope.row.order_state_name}}
            <!-- order_type -->
            <!-- <span v-if="scope.row.state==1" class="state-success state-border">成功</span>
            <span v-if="scope.row.state==2" class="state-wait state-border">待提交</span>
            <span v-if="scope.row.state==3" class="state-load state-border">提交中</span>
            <span v-if="scope.row.state==4" class="state-faile state-border">失败</span>-->
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.created_at)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operator_uid" label="创建者">
          <template slot-scope="scope">
            <span>{{scope.row.operator_info.nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_no" label="订单编号"></el-table-column>
        <el-table-column prop="out_order_id" label="支付编号"></el-table-column>

        <el-table-column label="关联项目">
          <template slot-scope="scope">
            <a :href="scope.row.related_project.url?scope.row.related_project.url:'#'">
              <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">
            <!-- 需求是状态等于“待提交的时候显示”给我一个状态_name 或者是待提交的id -->
            <nuxt-link :to="{path:'/main/artificial_order/?type=edit&id='+scope.row.order_no}">
              <span v-if="scope.row.status==0" class="lblue point">编辑</span>
            </nuxt-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="order-footer">
      <el-pagination
        background
        @current-change="getFinanceList"
        @size-change="changePageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
const tableHeaders = [
  "项目ID",
  "核定价格",
  "托管费用",
  "押金",
  "次月托管",
  "结算周期",
  "结算金额",
  "退回金额",
  "预计发薪",
  "发薪日期",
  "状态",
  "负责人",
  "操作",
  "备注",
  "项目状态",
  "账单ID",
  "企业方",
  "开发者",
  "试用天数"
];
const tableProps = [
  "job_id",
  "salary",
  "company_pay",
  "p_company_deposit",
  "next_period_pay",
  "payAround",
  "pay_to_dev",
  "return_money",
  "pre_send_salary_timeShow", //
  "send_salary_time",
  "p_status_name",
  "chk_user",
  "operate",
  "settle_msg",
  "j_status_name",
  "id",
  "company",
  "dev_realname",
  "probation_days"
];
const tableWidths = [
  "80",
  "80",
  "100",
  "80",
  "100",
  "120",
  "80",
  "80",
  "90",
  "80",
  "80",
  "100",
  "80",
  "180",
  "80",
  "80",
  "100",
  "100",
  "80"
];

export default {
  data() {
    return {
      tradeList: [
        {
          id: 0,
          type: "全部"
        },
        {
          id: 1,
          type: "充值"
        },
        {
          id: 2,
          type: "提现"
        },
        {
          id: 3,
          type: "购买"
        },
        {
          id: 4,
          type: "购买"
        }
      ],

      finaceList: [],

      // 下发的总数据
      totalData: {},
      // 项目ID
      jobID: "",
      // 审核人
      period: "",
      status: "",

      // 负责人
      checkUser: "",
      // 审核人列表
      periodStatusList: [],
      // 数据总条目
      totalCount: 1,
      currentPage: 1,
      currentPageSize: 20,
      // 列表宽度
      tableWidths,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      localData: {
        env: "test"
      }
    };
  },
  computed: {
    isTest() {
      return this.localData.env === "test";
    }
  },
  mounted() {
    // this.getTableData();
    this.getFinanceList();
  },
  methods: {
    clickDev(uid) {
      this.$router.push({ path: "/main/orders_detail", params: { id: uid } });
    },
    changePageSize(val) {
      this.getFinanceList();
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => ({
        ...i,
        payAround: `${i.start_time}<br>${i.end_time}`,
        pre_send_salary_timeShow: new Date(
          i.pre_send_salary_time * 1000
        ).toLocaleDateString()
      }));
    },
    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
      );
    },

    // 获取列表数据

    async getFinanceList() {
      let body = {
        page: this.currentPage,
        page_size: this.currentPageSize,
        artificial_mark: 1
      };
      const res = await this.$post("/api/admin/order/get_orders", body);
      var data = res.data;
      this.finaceList = data.orders;
      this.totalCount = Number(data.count);
    },
    async downFinanceList() {
      let body = {
        page: this.currentPage,
        page_size: this.currentPageSize,
        artificial_mark: 1
      };
      // const res = await this.$get("/api/admin/order/get_orders", body);
      // http://local-rooter.proginn.com:20201/api/admin/order/get_orders?page=1&page_size=20&artificial_mark=1
      var url =
        window.location.host + "/api/admin/order/export?" + "artificial_mark=1";
      console.log(url);
      window.location.href = "http://" + url;
    },
    createOrder() {
      this.$router.push({
        path: "artificial_order/",
        query: {
          type: "create"
        }
      });
    }
  }
};
</script>

<style scoped>
.order-footer {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
#order-wrap {
  width: 100%;
}
#cloud-balance {
  white-space: nowrap;
  overflow-x: scroll;
  height: calc(100% - 40px);
}
.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 270px;
}
.selector-box {
  /* margin-top: 10px; */
}
.selector-box {
  display: flex;
  justify-content: space-between;
}
/* .selector-box-left {
} */
.table {
  margin-top: 10px;
  height: calc(100% - 320px);
}
.order-table {
  /* height: calc(100% - 300px); */
}
.end-row {
  background: rgba(0, 0, 0, 0.1);
}
.inlineb {
  display: inline-block;
}
.vsub {
  vertical-align: sub;
}
.type-boxs {
  margin-bottom: 10px;
}
.green {
  color: rgba(37, 155, 36, 1);
}
.orange {
  color: rgba(255, 152, 0, 1);
}
.state-success {
  display: inline-block;
  padding: 0px 8px;
  text-align: center;
  border: 1px solid rgb(48, 142, 255);
}
.state-wait {
  display: inline-block;
  padding: 0px 8px;
  text-align: center;
  border: 1px solid rgb(134, 130, 130);
}

.state-load {
  display: inline-block;
  padding: 0px 8px;
  text-align: center;
  border: 1px solid rgb(37, 155, 36);
}
.state-faile {
  display: inline-block;
  padding: 0px 8px;
  text-align: center;
  border: 1px solid rgb(229, 28, 35);
}
</style>