remuneration/src/views/sandbox/sandboxCalculate.vue

<template>
  <m-dialog title="绩效测算"  ref="dialog" v-loading="loading" width="1200px">
    <div v-if="!isCalculate && !isSuccess" class="d-flex align-center justify-center">
      正在测算中，请稍后...
    </div>
    <el-result v-if="isCalculate" icon="success" title="测算完成"></el-result>
    <template v-if="isSuccess">
      <el-radio-group v-model="choose" @input="getList">
        <el-radio
          v-for="item in radioItems"
          :key="item.id"
          :label="item.id"
        >
          {{ item.name }}
        </el-radio>
      </el-radio-group>
      <m-table
        class="mt-3"
        shadow="never"
        clearHeader
        :items="tableItems"
        :headers="tableHeaders"
        :page-size="tablePageInfo.size"
        :page-current="tablePageInfo.current"
        :total="tableTotal"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      ></m-table>
    </template>
  </m-dialog>
</template>

<script>
import {
  getSandboxResultList,
  getSandboxResultPage
} from '@/api/salary'
export default {
  name: 'sandboxCalculate',
  data () {
    return {
      choose: null,
      loading: false,
      isCalculate: false,
      isSuccess: false,
      radioItems: [],
      tableTotal: 0,
      tableOrders: [],
      tablePageInfo: {
        size: 10,
        current: 1
      },
      tableItems: [],
      tableHeaders: []
    }
  },
  methods: {
    async open (item) {
      this.isCalculate = false
      this.isSuccess = false
      this.$refs.dialog.open()
      this.loading = true
      try {
        const { data } = await getSandboxResultList({
          modelName: item.modelName
        })
        this.radioItems = data || []
        if (this.radioItems.length) {
          this.choose = this.radioItems[0].id
        }
        this.isCalculate = true
        await this.getList()
        this.isCalculate = false
        this.isSuccess = true
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async getList () {
      this.loading = true
      try {
        const { data } = await getSandboxResultPage({
          page: {
            ...this.tablePageInfo,
            orders: this.tableOrders
          },
          id: this.choose
        })
        this.tableHeaders = data.dataColumn.map(e => {
          return {
            label: e.name,
            prop: e.enName
          }
        })
        this.tableItems = data.page.records
        this.tableTotal = data.page.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onPageChange (index) {
      this.tablePageInfo.current = index
      this.getList()
    },
    onSortChange (v) {
      this.tableOrders = v
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>