boss/pages/main/index/orders.vue

<template>
  <div id="cloud-balance">
    <section class="top">
      <!-- <h3>交易订单中心</h3> -->
      <section>
        <div class="type-boxs">
          <span class="vsub">订单类型:</span>
          <div class="inlineb">
            <el-checkbox-group v-model="orderType" @change="changeOrder" size="mini">
              <el-checkbox-button v-for="itm in TypeList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
          <div class="inlineb vsub">
            <span>交易类型：</span>
            <el-select v-model="status" placeholder="交易类型">
              <el-option
                v-for="item of jobStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- <div class="type-boxs">
          <span class="vsub">交易类型:</span>
          <div class="inlineb">
            <el-checkbox-group v-model="tradeType" @change="changeTrade" size="mini">
              <el-checkbox-button
                v-for="itm in tradeList"
                :label="itm.id"
                :key="itm.id"
              >{{itm.type}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>-->
        <div class="type-boxs">
          <span class="vsub">支付方式:</span>
          <div class="inlineb">
            <el-checkbox-group v-model="payType" @change="changePay" size="mini">
              <el-checkbox-button v-for="itm in payList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
            </el-checkbox-group>
          </div>
        </div>
        <div class="type-boxs">
          <div class="inlineb">
            <span class>时间范围：</span>
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2"
            ></el-date-picker>
          </div>
          <div class="inlineb">
            <span class>时间类型:</span>
            <el-select v-model="timeType" placeholder="请选择">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inlineb">
            <span class>状态:</span>
            <div class="inlineb">
              <el-select v-model="status" placeholder="项目状态">
                <el-option
                  v-for="item of jobStatusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <el-checkbox v-model="checked">人工财务</el-checkbox>
        </div>
        <div class="type-boxs">
          <div class="inlineb">
            <span class>编号:</span>
            <div class="inlineb">
              <el-input style="width: 230px;" v-model="searchId" placeholder="订单编号/订单名称/支付编号"></el-input>
            </div>
          </div>
          <div class="inlineb">
            <span class>用户:</span>
            <div class="inlineb">
              <el-input style="width: 180px;" v-model="checkUser" placeholder="uid/昵称/姓名"></el-input>
            </div>
          </div>
          <div class="inlineb">
            <span class>项目:</span>
            <div class="inlineb">
              <el-select v-model="status" placeholder="项目状态">
                <el-option
                  v-for="item of jobStatusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="inlineb">
              <el-input style="width: 100px;" v-model="checkUser" placeholder="项目ID"></el-input>
            </div>
          </div>

          <el-button type="primary">筛选</el-button>
          <el-button>导出报表</el-button>
        </div>
        <div class="type-boxs">
          <div>
            <span>订单数量：34000(成功31203)，</span>
            <span>
              收入金额：
              <span class="green">120334元(成功123220元)</span>
            </span>
            ,
            <span>
              支出金额：
              <span class="orange">134953元(成功12342元)</span>
            </span>
          </div>
        </div>
      </section>
    </section>
    <!-- <section class="selector-box">
      <section class="selector-box-left">
        <el-select v-model="status" placeholder="项目状态">
          <el-option
            v-for="item of jobStatusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select v-model="period" placeholder="账单状态">
          <el-option
            v-for="item of periodStatusList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-input style="width: 200px;" v-model="checkUser" placeholder="负责人"></el-input>
        <el-input style="width: 200px;" v-model="jobID" placeholder="项目ID"></el-input>
        <el-button @click="clickSearchConfirm">确认</el-button>
      </section>
      <el-button @click="clickExport" type="primary">导出</el-button>
    </section>-->
    <div class>
      <!-- height="250" -->
      <el-table :data="tableData3" border style="width: 100%">
        <el-table-column prop="date" label="订单名称"></el-table-column>
        <el-table-column prop="name" label="用户"></el-table-column>
        <el-table-column label="实际金额">
          <template slot-scope="scope">
            <span :class="parseInt(scope.row.money)>0?'green':'orange'">{{scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="支付方式"></el-table-column>
        <el-table-column prop="name" label="订单状态"></el-table-column>
        <el-table-column prop="name" label="创建时间"></el-table-column>
        <el-table-column prop="name" label="到账时间"></el-table-column>
        <el-table-column prop="name" label="订单编号"></el-table-column>
        <el-table-column prop="name" label="支付编号"></el-table-column>
        <el-table-column prop="name" width="100" label="订单类型">
          <template slot-scope="scope">
            <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 prop="name" label="交易类型"></el-table-column>
        <el-table-column prop="name" label="关联项目"></el-table-column>
        <el-table-column prop="name" label="人工"></el-table-column>
      </el-table>
    </div>
    <div class="order-footer">
      <el-pagination
        background
        @current-change="getTableData"
        @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 {
      checked: false,
      orderType: [0],
      tradeType: [0],
      payType: [0],
      timeType: 1,
      timeOptions: [
        {
          value: 1,
          label: "到帐时间"
        },
        {
          value: 2,
          label: "创建时间"
        }
      ],
      TypeList: [
        {
          id: 0,
          type: "全部"
        },
        {
          id: 1,
          type: "整包项目"
        },
        {
          id: 2,
          type: "云端工作"
        },
        {
          id: 3,
          type: "雇佣工作"
        }
      ],
      tradeList: [
        {
          id: 0,
          type: "全部"
        },
        {
          id: 1,
          type: "充值"
        },
        {
          id: 2,
          type: "提现"
        },
        {
          id: 3,
          type: "购买"
        },
        {
          id: 4,
          type: "购买"
        }
      ],
      payList: [
        {
          id: 0,
          type: "全部"
        },
        {
          id: 1,
          type: "充值"
        },
        {
          id: 2,
          type: "提现"
        },
        {
          id: 3,
          type: "购买"
        },
        {
          id: 4,
          type: "购买"
        }
      ],
      pickerOptions2: {
        shortcuts: [
          {
            text: "全部",
            onClick(picker) {
              alert("获取全部数据");
            }
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              var week = new Date().getDay() - 1;
              console.log(week);
              if (week == -1) {
                week = 6;
              }
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * week);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              var month = new Date().getMonth + 1;
              var year = new Date().getFullYear();
              // console.log(month, year);
              var day = new Date().getDate() - 1;
              console.log(day);

              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本年",
            onClick(picker) {
              var month = new Date().getMonth + 1;
              var year = new Date().getFullYear();
              // console.log(month, year);
              var day = new Date().getDate() - 1;
              var firstDay = new Date(year, 0, 1);
              var dateDiff = new Date() - firstDay;
              var msPerDay = 1000 * 60 * 60 * 24;
              //计算天数
              var diffDays = Math.ceil(dateDiff / msPerDay) - 1;
              console.log(diffDays);
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * diffDays);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timeRange: "",
      arriveTime: "",
      searchId: "",
      tableData3: [
        {
          date: "2016-05-03",
          name: "王小虎",
          money: "200",
          state: 1
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          money: "-100",
          state: 2
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          money: "-100",
          state: 3
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          money: "-100",
          state: 4
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          money: "2100",
          state: 1
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          money: "-1200",
          state: 4
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          money: "-100",
          state: 1
        }
      ],

      // 下发的总数据
      totalData: {},
      // 项目ID
      jobID: "",
      // 审核人
      period: "",
      status: "",
      // 状态列表数据
      jobStatusList: [],
      // 负责人
      checkUser: "",
      // 审核人列表
      periodStatusList: [],
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      currentPageSize: 20,
      // 列表宽度
      tableWidths,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      localData: {
        env: "test"
      }
    };
  },
  computed: {
    isTest() {
      return this.localData.env === "test";
    },
    whole() {
      return this.totalData.whole || {};
    },
    totalDeposit() {
      return this.whole.total_deposit;
    },
    totalFee() {
      return this.whole.total_fee;
    }
  },
  mounted() {
    this.getTableData();
    this.getEnum();
  },
  methods: {
    // 改变订单类型
    changeOrder() {
      var haveAll = false;
      for (var i = 0; i < this.orderType.length; i++) {
        if (this.orderType[i] == 0) {
          haveAll = true;
        }
      }

      // 选择其他的时候，去掉全部,全部在第一位
      if (
        this.orderType[0] == 0 &&
        1 < this.orderType.length < this.TypeList.length
      ) {
        var arr = [];
        for (var i = 0; i < this.orderType.length; i++) {
          if (this.orderType[i] != 0) {
            arr.push(this.orderType[i]);
          }
        }

        this.orderType = arr;
      }
      // 选择全部的时候去掉其他，全部在最后一位
      if (this.orderType[this.orderType.length - 1] == 0) {
        this.orderType = [0];
      }
      if (!haveAll && this.orderType.length == this.TypeList.length - 1) {
        this.orderType = [0];
      }
      if (this.orderType.length == 0) {
        console.log("sss:", this.orderType);
        this.orderType = [0];
      }
    },

    // 改变支付方式
    changePay() {
      var haveAll = false;
      for (var i = 0; i < this.payType.length; i++) {
        if (this.payType[i] == 0) {
          haveAll = true;
        }
      }

      // 选择其他的时候，去掉全部,全部在第一位
      if (
        this.payType[0] == 0 &&
        1 < this.payType.length < this.payList.length
      ) {
        var arr = [];
        for (var i = 0; i < this.payType.length; i++) {
          if (this.payType[i] != 0) {
            arr.push(this.payType[i]);
          }
        }

        this.payType = arr;
      }
      // 选择全部的时候去掉其他，全部在最后一位
      if (this.payType[this.payType.length - 1] == 0) {
        this.payType = [0];
      }
      if (!haveAll && this.payType.length == this.payList.length - 1) {
        this.payType = [0];
      }
      if (this.payType.length == 0) {
        console.log("sss:", this.orderType);
        this.payType = [0];
      }
    },
    clickExport() {
      window.open("/api/admin/job/get_all_periods?action=export");
    },
    /**
     * 获取筛选值
     */
    async getEnum() {
      let { data } = await this.$get("/api/admin/job/getEnum");
      console.log(data);
      if (data) {
        let { jobStatusList, periodStatusList } = data;
        this.jobStatusList = jobStatusList;
        this.periodStatusList = periodStatusList;
      }
    },
    // 点击操作
    clickOperate({ job_id, id }) {
      if (this.isTest)
        window.open(
          `https://dev.test-rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
        );
      else
        window.open(
          `https://rooter.proginn.com/main/wage_settlement?job_id=${job_id}&period_id=${id}`
        );
    },
    // 点击账单
    clickOrder(i) {
      if (this.isTest)
        window.open(
          `https://dev.test-rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
        );
      else
        window.open(
          `https://rooter.proginn.com/main/wage_details?job_id=${i.job_id}&period_id=${i.id}`
        );
    },
    // 点击开发者
    clickDev(uid) {
      if (this.isTest)
        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
    },
    // 点击企业
    clickCompany(uid) {
      if (this.isTest)
        window.open(`https://dev.test.proginn.com/rooter/user/${uid}`);
      else window.open(`https://www.proginn.com/rooter/user/${uid}`);
    },
    // 点击账单id
    clickJobID(jobID) {
      if (this.isTest)
        window.open(
          `https://dev.test.proginn.com/rooter/cloudjobitem/${jobID}`
        );
      else window.open(`https://www.proginn.com/rooter/cloudjobitem/${jobID}`);
    },
    // 点击重试
    async clickRetry(id) {
      const res = await this.$post("/api/admin/payment/redoDraw", { id });
      // console.log(res)
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      // console.log({row, rowIndex})
      let className = "";
      if (row.j_status_name === "结束合作") className = "end-row";
      // console.log(className)
      return className;
    },
    // 格式化列表数据
    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()
      }));
    },
    /**
     * 点击筛选确认
     */
    clickSearchConfirm() {
      this.currentPage = 1;
      this.getTableData();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableData();
    },
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      let url = "/api/admin/job/get_all_periods";
      let body = { page: this.currentPage, page_size: this.currentPageSize };
      if (this.status) body.j_status = this.status;
      if (this.period) body.p_status = this.period;
      if (this.checkUser) body.chk_user = this.checkUser;
      if (this.jobID) body.job_id = this.jobID;
      const res = await this.$post(url, body);
      const data = res.data;
      this.tableData = this.formatTableData(data.list);
      this.totalData = data;
      // // console.log(this.tableData)
      this.totalCount = Number(data.total);
      this.totalPage = data.totalPage;
      this.localData.env = data.current_env;
    }
  },
  created(){
    console.log(process.env.NODE_ENV)
  }
};
</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>