boss/pages/main/index/cloud_balance.vue

<template>
  <div id="cloud-balance">
    <section class="top">
      <h3>云端财务列表</h3>
      <section>
        <span>托管总金额: <b>{{totalFee}}</b></span>
        <span>押金总金额: <b>{{totalDeposit}}</b></span>
      </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="table">
      <el-table
        v-if="tableData.length"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :width="tableWidths[index]"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'id'"
              @click="clickOrder(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <el-button
              type="text"
              v-else-if="prop === 'job_id'"
              @click="clickJobID(scope.row[prop])"
            >{{scope.row[prop]}}</el-button>
            <el-button
              type="text"
              v-else-if="prop === 'company'"
              @click="clickCompany(scope.row['uid'])"
            >{{scope.row[prop]}}</el-button>
            <el-button
              type="text"
              v-else-if="prop === 'operate'"
              @click="clickOperate(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <el-button
              type="text"
              v-else-if="prop === 'dev_realname'"
              @click="clickDev(scope.row['developer_uid'])"
            >{{scope.row[prop]}}</el-button>
            <span v-else-if="prop === 'payAround'" v-html="scope.row[prop]"/>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <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>
</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 {
      // 下发的总数据
      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: {
    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
    }
  }
}
</script>

<style scoped>
#cloud-balance {
  white-space: nowrap;
  overflow-x: scroll;
}
.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;
}
.selector-box {
  margin-top: 10px;
}
.selector-box {
  display: flex;
  justify-content: space-between;
}
/* .selector-box-left {
} */
.table {
  margin-top: 10px;
  height: calc(100% - 160px);
}
.end-row {
  background: rgba(0, 0, 0, 0.1);
}
</style>