ren

src/views/professional/salaryexportrecord/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <!-- 搜索表单 -->
+      <search-form 
+        v-show="showSearch" 
+        :model="search" 
+        ref="searchFormRef"
+        @keyup-enter="handleFilter"
+      >
+        <template #default="{ visible }">
+          <template v-if="visible">
+            <el-form-item label="薪资年份" prop="salaryYear">
+              <el-date-picker
+                v-model="search.salaryYear"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="请选择薪资年份"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+
+            <el-form-item label="薪资月份" prop="salaryMonth">
+              <el-date-picker
+                v-model="search.salaryMonth"
+                type="month"
+                format="M"
+                value-format="M"
+                placeholder="请选择薪资月份"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+          </template>
+        </template>
+      </search-form>
+
+      <!-- 表格 -->
+      <el-table
+        ref="tableRef"
+        :data="state.dataList"
+        v-loading="state.loading"
+        border
+        :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle"
+        class="data-table"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        
+        <el-table-column prop="createTime" label="导出时间" width="180" align="center" />
+        
+        <el-table-column prop="salaryYear" label="薪资年份" width="120" align="center" />
+        
+        <el-table-column prop="salaryMonth" label="薪资月份" width="120" align="center" />
+        
+        <el-table-column prop="confirm" label="劳务日期锁定" width="150" align="center">
+          <template #default="scope">
+            <el-tag :type="scope.row.confirm === '1' ? 'success' : 'info'">
+              {{ scope.row.confirm === '1' ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        
+        <el-table-column label="操作" min-width="150" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              v-if="permissions.professional_salaryexportrecord_del"
+              icon="delete"
+              link
+              type="primary"
+              @click="handleDel(scope.row)">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-bind="state.pagination"
+        @current-change="currentChangeHandle"
+        @size-change="sizeChangeHandle"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserInfo } from '/@/stores/userInfo'
+import { BasicTableProps, useTable } from '/@/hooks/table'
+import { useMessage, useMessageBox } from '/@/hooks/message'
+import { fetchList, delObj } from '/@/api/professional/salaries/salaryexportrecord'
+
+// 使用 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 searchFormRef = ref()
+
+// 搜索表单显示状态
+const showSearch = ref(true)
+
+// 搜索表单数据
+const search = reactive({
+  salaryYear: '',
+  salaryMonth: ''
+})
+
+// 配置 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  pageList: async (params: any) => {
+    const response = await fetchList(params)
+    return {
+      data: {
+        records: response.data.records || [],
+        total: response.data.total || 0
+      }
+    }
+  },
+  queryForm: search
+})
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
+
+// 查询
+const handleFilter = () => {
+  getDataList() // 查询后跳转到第一页
+}
+
+// 删除
+const handleDel = (row: any) => {
+  messageBox.confirm('确认删除?').then(async () => {
+    try {
+      await delObj(row.id)
+      message.success('删除成功')
+      getDataList(false) // 删除后保持当前页
+    } catch (error: any) {
+      message.error(error?.msg || '删除失败')
+    }
+  }).catch(() => {
+    // 用户取消
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.data-table {
+  width: 100% !important;
+}
+</style>