138 lines
4.0 KiB
Vue
Executable File
138 lines
4.0 KiB
Vue
Executable File
<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="teacherNo">
|
||
<el-input
|
||
v-model="search.teacherNo"
|
||
clearable
|
||
placeholder="请输入工号"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="用户名" prop="realName">
|
||
<el-input
|
||
v-model="search.realName"
|
||
clearable
|
||
placeholder="请输入用户名"
|
||
/>
|
||
</el-form-item>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 操作按钮 -->
|
||
<template #actions>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
|
||
<el-button @click="resetQuery" icon="Refresh">重置</el-button>
|
||
</el-form-item>
|
||
</template>
|
||
</search-form>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
ref="tableRef"
|
||
:data="state.dataList"
|
||
v-loading="state.loading"
|
||
border
|
||
:cell-style="tableStyle.cellStyle"
|
||
:header-cell-style="tableStyle.headerCellStyle"
|
||
>
|
||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||
|
||
<el-table-column label="姓名/工号" min-width="150" align="center">
|
||
<template #default="scope">
|
||
<TeacherNameNo :name="scope.row.realName" :no="scope.row.teacherNo" />
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="oldBranchName" label="原支部名称" min-width="150" align="center" show-overflow-tooltip />
|
||
|
||
<el-table-column prop="branchName" label="现支部名称" min-width="150" align="center" show-overflow-tooltip />
|
||
|
||
<el-table-column prop="partyFee" label="党费" width="120" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.partyFee ? Number(scope.row.partyFee).toFixed(2) : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="changeTime" label="变动时间" width="180" align="center" />
|
||
|
||
<!-- <el-table-column prop="createTime" label="创建时间" width="180" align="center" /> -->
|
||
|
||
<el-table-column prop="remarks" label="备注" min-width="200" align="center" show-overflow-tooltip />
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<pagination
|
||
v-bind="state.pagination"
|
||
@current-change="currentChangeHandle"
|
||
@size-change="sizeChangeHandle"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { defineAsyncComponent } from 'vue'
|
||
import { BasicTableProps, useTable } from '/@/hooks/table'
|
||
import { fetchList } from '/@/api/professional/professionaluser/professionalpartychange'
|
||
|
||
const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
|
||
|
||
// 表格引用
|
||
const tableRef = ref()
|
||
const searchFormRef = ref()
|
||
const showSearch = ref(true)
|
||
|
||
// 搜索表单数据
|
||
const search = reactive({
|
||
teacherNo: '',
|
||
realName: ''
|
||
})
|
||
|
||
// 配置 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 resetQuery = () => {
|
||
Object.assign(search, {
|
||
teacherNo: '',
|
||
realName: ''
|
||
})
|
||
getDataList()
|
||
}
|
||
|
||
// 表格数据由 useTable（createdIsNeed 默认 true）在挂载时自动请求
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|