school-developer/src/views/recruit/recruitstudentsignupturnovermoneychange/index.vue

<!--
  -    Copyright (c) 2018-2025, cyweb All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  -
  -->

<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!-- 搜索表单 -->
      <!-- <el-form :model="queryForm" inline>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
          <el-button icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->

      <!-- 操作按钮 -->
      <el-row>
        <div>
          <el-button 
            v-if="permissions.recruit_recruitstudentsignupturnovermoneychange_add"
            type="primary"
            icon="FolderAdd"
            @click="handleAdd">新 增
          </el-button>
        </div>
      </el-row>

      <!-- 表格 -->
      <el-table
        ref="tableRef"
        :data="state.dataList"
        v-loading="state.loading"
        border
        stripe
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="turnOverId" label="异动ID" align="center" show-overflow-tooltip />
        <el-table-column prop="type" label="退补类型 1：学费 2：代办费 3：捐资费" align="center" show-overflow-tooltip />
        <el-table-column prop="oldFee" label="原费用" align="center" show-overflow-tooltip />
        <el-table-column prop="newFee" label="变更后费用" align="center" show-overflow-tooltip />
        <el-table-column prop="fee" label="变更费用" align="center" show-overflow-tooltip />
        <el-table-column prop="incOrDec" label="补还是退 1：补 2：退" align="center" show-overflow-tooltip />
        <el-table-column prop="pushed" label="是否推送，预留字段，单项推送则需要该字段" align="center" show-overflow-tooltip />
        <el-table-column prop="pushFailReason" label="推送失败原因" align="center" show-overflow-tooltip />
        <el-table-column prop="createBy" label="创建者" align="center" show-overflow-tooltip />
        <el-table-column prop="createDate" label="创建时间" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button
              v-if="permissions.recruit_recruitstudentsignupturnovermoneychange_edit"
              type="primary"
              link
              icon="EditPen"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="permissions.recruit_recruitstudentsignupturnovermoneychange_del"
              type="danger"
              link
              icon="Delete"
              @click="handleDel(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-bind="state.pagination"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
      />

      <!-- 新增/编辑弹窗 -->
      <FormDialog ref="formDialogRef" @refresh="getDataList"></FormDialog>
    </div>
  </div>
</template>

<script setup lang="ts" name="recruitstudentsignupturnovermoneychange">
import { ref, reactive, computed, onMounted, defineAsyncComponent, nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserInfo } from '/@/stores/userInfo'
import { BasicTableProps, useTable } from '/@/hooks/table'
import { useMessage, useMessageBox } from '/@/hooks/message'
import { delObj, fetchList } from '/@/api/recruit/recruitstudentsignupturnovermoneychange'

// 定义组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'))

// 使用 Pinia store
const userInfoStore = useUserInfo()
const { userInfos } = storeToRefs(userInfoStore)

// 创建权限对象
const permissions = computed(() => {
  const perms: Record<string, boolean> = {}
  userInfos.value.authBtnList.forEach((perm: string) => {
    perms[perm] = true
  })
  return perms
})

// 消息提示 hooks
const message = useMessage()
const messageBox = useMessageBox()

// 表格引用
const tableRef = ref()
const formDialogRef = ref()

// 查询表单
const queryForm = reactive<Record<string, any>>({})

// 表格状态
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: queryForm,
  pageList: async (params: any) => {
    const response = await fetchList(params)
    return {
      data: {
        records: response.data.records,
        total: response.data.total
      }
    }
  }
})

// 使用 table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)

// 重置查询
const resetQuery = () => {
  Object.keys(queryForm).forEach(key => {
    queryForm[key] = ''
  })
  getDataList()
}

// 新增
const handleAdd = () => {
  nextTick(() => {
    formDialogRef.value?.init()
  })
}

// 编辑
const handleEdit = (row: any) => {
  nextTick(() => {
    formDialogRef.value?.init(row)
  })
}

// 删除
const handleDel = async (row: any) => {
  try {
    await messageBox.confirm(`是否确认删除ID为${row.id}的记录？`)
    await delObj(row.id)
    message.success('删除成功')
    getDataList()
  } catch {
    // 用户取消
  }
}

onMounted(() => {
  getDataList()
})
</script>

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