supply-front/src/views/finance/change_list.vue

<template>
  <template-page
    ref="pageRef"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :getList="getList"
    :exportList="exportList"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
    :columnParsing="columnParsing"
    :replaceOrNotMap="false"
  >
    <Popu v-if="showPage !== 1">
      <ChangeListDetail v-if="showPage == 2" @refresh="refreshFn" :detailList="detailList" />
      <ChangeListExamine v-if="showPage == 3" @refresh="refreshFn" :detailList="detailList" />
      <ChangeListReview v-if="showPage == 4" @refresh="refreshFn" :detailList="detailList" />
    </Popu>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import { getChangeList, getChangeListDetail, getTransferSubmit, getTransferCancel } from '@/api/finance/change_list'
import { financeTransferList, financeTransferListExport } from '@/api/finance/change_list_v2'
import Popu from '@/components/template/popu.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import ChangeListDetail from './components/change_list-detail'
import ChangeListExamine from './components/change_list-examine'
import ChangeListReview from './components/change_list-review'
export default {
  components: {
    ChangeListDetail,
    ChangeListExamine,
    ChangeListReview,
    TemplatePage,
    Popu
  },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      isCustomer: null,
      showPage: 1,
      detailList: {},
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: []
    }
  },
  created() {
    const res = JSON.parse(localStorage.getItem('supply_user'))
    this.isCustomer = res.isCustomer
  },
  methods: {
    // 列表请求函数
    getList: financeTransferList,
    // 列表导出函数
    exportList: financeTransferListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            {this.$checkBtnRole('apply', this.$route.meta.roles) && row.examineStatus == 'SAVE' ? (
              <el-button
                onClick={() => {
                  this.submitFn(row.id)
                }}
                type="text"
                class="textColor"
                slot="reference"
              >
                提审
              </el-button>
            ) : null}
            {row.examineStatus == 'WAIT' &&
            !this.isCustomer &&
            this.$checkBtnRole('examine', this.$route.meta.roles) ? (
              <el-button
                onClick={() => {
                  this.examineFn(row.id)
                }}
                type="text"
                class="textColor"
                slot="reference"
              >
                审核
              </el-button>
            ) : null}
            {(row.examineStatus == 'FAIL_ONE' || row.examineStatus == 'SAVE') &&
            this.$checkBtnRole('edit', this.$route.meta.roles) ? (
              <el-button
                type="text"
                class="textColor"
                slot="reference"
                onClick={() => {
                  this.editFn(row.id)
                }}
              >
                修改
              </el-button>
            ) : null}
            <el-button
              onClick={() => {
                this.detailFn(row.id)
              }}
              type="text"
              class="textColor"
              slot="reference"
            >
              详情
            </el-button>
            {row.examineStatus == 'WAIT' ? (
              <el-button
                onClick={() => {
                  this.cancelFn(row.id)
                }}
                type="text"
                class="textColor"
                slot="reference"
              >
                取消
              </el-button>
            ) : null}
          </div>
        )
      }
    },
    //取消
    async cancelFn(id) {
      await getTransferCancel({ id })
      this.refreshFn()
      this.$message.success('取消成功')
    },
    //刷新
    refreshFn() {
      this.$refs.pageRef.refreshList()
      this.addOff(() => {
        this.showPage = 1
      })()
    },
    //提审
    async submitFn(id) {
      await getTransferSubmit({ id })
      this.$message.success('提审成功')
      this.refreshFn()
    },
    //详情
    async detailFn(id) {
      const res = await getChangeListDetail({ id })
      this.detailList = res.data
      this.showPage = 2
    },
    //修改
    async editFn(id) {
      const res = await getChangeListDetail({ id })
      this.detailList = res.data
      this.showPage = 4
    },
    //审核
    async examineFn(id) {
      const res = await getChangeListDetail({ id })
      this.detailList = res.data
      this.showPage = 3
    }
  }
}
</script>

<style lang="scss" scoped></style>