ruoyi-project/java代码/ruoyi-ui/src/views/merits/view/index.vue

<template>
  <div id="list" class="main">
    <el-row v-if="view==='list'">
      <el-col :span="24">
        <data-table
          :fields="fields"
          :opera="opera"
          :total="total"
          :data="list"
          @query="search"
          @toView="toView"
        />
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" plain icon="el-icon-back" size="mini" @click="toBack">返回</el-button>
          </el-col>
          <el-col :span="24">
            <achieve-view :info="viewData" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import achieveView from '@/components/free/achieve-view.vue'
import dataTable from '@/components/free/filter-page-table.vue'
const _ = require('lodash')
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('duplicate')
export default {
  name: 'List',
  components: { dataTable, achieveView },
  props: {},
  data: function() {
    return {
      view: 'list',
      list: [],
      total: 0,
      fields: [
        { label: '用户名称', prop: 'user_name', filter: true },
        {
          label: "申报状态",
          prop: "status",
          format: (i) =>
            i == "0"
              ? "草稿"
              : i == "1"
              ? "待审中"
              : i == "2"
              ? "审核通过"
              : i == "3"
              ? "审核拒绝"
              : "",
        },
      ],
      opera: [
        { label: '查看', method: 'toView' }
      ],
      viewData: {}
    }
  },
  created() {
    this.search()
  },
  methods: {
    ...mapActions(['query']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, ...info })
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data)
        this.$set(this, `total`, res.total)
      }
    },
    async toView({ data }) {
      this.$set(this, `viewData`, _.cloneDeep(data))
      this.view = 'detail'
    },
    async toBack() {
      this.view = 'list'
      this.viewData = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 25px 30px 30px;
}
</style>