372 lines
9.9 KiB
Vue
372 lines
9.9 KiB
Vue
<template>
|
|
<div class="base-container">
|
|
<!-- 搜索区域 -->
|
|
<div class="search-area">
|
|
<el-form :model="queryParams" inline>
|
|
<el-form-item label="科室名称:">
|
|
<el-select
|
|
v-model="queryParams.currentSelection"
|
|
placeholder="请选择科室"
|
|
filterable
|
|
style="width: 240px"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in departmentOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="项目名称">
|
|
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" />
|
|
</el-form-item>
|
|
<el-form-item label="项目代号">
|
|
<el-input v-model="queryParams.projectCode" placeholder="请输入项目代号" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 操作按钮区 -->
|
|
<div class="operation-area">
|
|
<el-button type="primary" @click="handleAdd">
|
|
<el-icon><Plus />
|
|
</el-icon>新增
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 已选择项提示 -->
|
|
<div class="selection-tip">
|
|
已选择 {{ selectedCount }} 项
|
|
<el-button text type="primary" @click="handleClear">清空</el-button>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<el-table
|
|
ref="tableRef"
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55" :resizable="false" />
|
|
<el-table-column prop="itemCode" label="项目代号" :resizable="false" />
|
|
<el-table-column prop="itemName" label="检查项目名称" :resizable="false" />
|
|
<el-table-column prop="price" label="项目单价(元)" :resizable="false" />
|
|
<el-table-column label="折扣价(元)" :resizable="false">
|
|
<template #default="scope">
|
|
{{ calculateDiscountedPrice(scope.row.price, scope.row.discounted) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="discounted" label="折扣(%) " :resizable="false" />
|
|
<el-table-column prop="section" label="科室名称" :resizable="false" />
|
|
<el-table-column prop="unit" label="项目单位" :resizable="false" />
|
|
<el-table-column prop="highValue" label="取值上限" :resizable="false" />
|
|
<el-table-column prop="lowValue" label="取值下限" :resizable="false" />
|
|
<el-table-column prop="moduleName" label="体检单元" :resizable="false" />
|
|
<el-table-column prop="groupname" label="模块名称" :resizable="false" />
|
|
<el-table-column prop="mealfrontorafter" label="餐前餐后" :resizable="false" />
|
|
<el-table-column label="操作" width="180" :resizable="false">
|
|
<template #default="scope">
|
|
<el-dropdown>
|
|
<el-button size="small">
|
|
更多操作
|
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="handleEdit(scope.row.id)">编辑</el-dropdown-item>
|
|
<el-dropdown-item @click="handleDelete(scope.row)" style="color: red;">删除</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:total="total"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 添加创建对话框组件 -->
|
|
<CreateUI ref="createDialog" @success="handleSearch" />
|
|
|
|
<editUI ref="editDialog" @success="handleSearch"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
import { Plus, ArrowDown } from '@element-plus/icons-vue'
|
|
import { DepartmentApi, DepartmentVO } from '@/api/inspect/inspectdepartment/index'
|
|
import { itemsApi, itemsVO } from '@/api/inspect/inspectitems/index'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import CreateUI from './createUI.vue'
|
|
import editUI from './editUI.vue'
|
|
|
|
// 表格数据类型定义
|
|
interface TableItem extends itemsVO {}
|
|
const tableData = ref<TableItem[]>([])
|
|
|
|
// 查询参数接口定义
|
|
interface QueryParams {
|
|
pageNo: number
|
|
pageSize: number
|
|
projectName?: string
|
|
projectCode?: string
|
|
section?: string
|
|
currentSelection: string | number
|
|
moduleName?: string
|
|
groupname?: string
|
|
mealfrontorafter?: string
|
|
}
|
|
|
|
const queryParams = reactive<QueryParams>({
|
|
currentSelection: '',
|
|
projectName: '',
|
|
projectCode: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
groupname: '',
|
|
mealfrontorafter: ''
|
|
})
|
|
|
|
// 新增组件
|
|
const createDialog = ref()
|
|
const selectedCount = ref(0)
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(10)
|
|
const total = ref(0)
|
|
|
|
// 科室选项列表
|
|
interface DepartmentOption {
|
|
value: number | string
|
|
label: string
|
|
}
|
|
const departmentOptions = ref<DepartmentOption[]>([])
|
|
// 添加表格的ref
|
|
const tableRef = ref()
|
|
// 添加新的ref
|
|
const editDialogVisible = ref(false)
|
|
const editDialog = ref()
|
|
// 获取科室列表
|
|
const getDepartmentList = async () => {
|
|
try {
|
|
const data = await DepartmentApi.getListDepartment()
|
|
departmentOptions.value = data.map((item: DepartmentVO) => ({
|
|
value: item.departmentName,
|
|
label: item.departmentName
|
|
}))
|
|
} catch (error) {
|
|
console.error('获取科室列表失败:', error)
|
|
ElMessage.error('获取科室列表失败')
|
|
}
|
|
}
|
|
// 获取表格数据
|
|
const getTableData = async () => {
|
|
try {
|
|
// 构建搜索参数
|
|
const params: any = {
|
|
pageNo: currentPage.value,
|
|
pageSize: pageSize.value
|
|
}
|
|
|
|
// 只添加有值的搜索条件
|
|
if (queryParams.projectName?.trim()) {
|
|
params.itemName = queryParams.projectName.trim()
|
|
}
|
|
|
|
if (queryParams.projectCode?.trim()) {
|
|
params.itemCode = queryParams.projectCode.trim()
|
|
}
|
|
|
|
if (queryParams.currentSelection) {
|
|
params.section = queryParams.currentSelection
|
|
}
|
|
|
|
// 添加模块名称和餐前餐后的查询条件
|
|
if (queryParams.groupname?.trim()) {
|
|
params.groupname = queryParams.groupname.trim()
|
|
}
|
|
|
|
if (queryParams.mealfrontorafter?.trim()) {
|
|
params.mealfrontorafter = queryParams.mealfrontorafter.trim()
|
|
}
|
|
|
|
const data = await itemsApi.getitemsPage(params)
|
|
if (data && data.list) {
|
|
tableData.value = data.list
|
|
total.value = data.total
|
|
|
|
if (data.list.length === 0) {
|
|
ElMessage.info('未找到匹配的数据')
|
|
}
|
|
} else {
|
|
tableData.value = []
|
|
total.value = 0
|
|
ElMessage.info('未找到匹配的数据')
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error('搜索失败，请重试')
|
|
tableData.value = []
|
|
total.value = 0
|
|
}
|
|
}
|
|
|
|
// 搜索方法
|
|
const handleSearch = () => {
|
|
// 验证项目代号是否为数字
|
|
if (queryParams.projectCode && !/^\d*$/.test(queryParams.projectCode)) {
|
|
ElMessage.warning('项目代号只能输入数字')
|
|
return
|
|
}
|
|
|
|
// 移除验证搜索条件的限制，允许无条件搜索
|
|
currentPage.value = 1 // 重置到第一页
|
|
getTableData()
|
|
}
|
|
|
|
// 重置方法
|
|
const handleReset = () => {
|
|
queryParams.currentSelection = ''
|
|
queryParams.projectName = ''
|
|
queryParams.projectCode = ''
|
|
currentPage.value = 1
|
|
getTableData()
|
|
}
|
|
|
|
// 表格选择改变
|
|
const handleSelectionChange = (selection) => {
|
|
selectedCount.value = selection.length
|
|
}
|
|
|
|
// 清空选择
|
|
const handleClear = () => {
|
|
tableRef.value?.clearSelection()
|
|
selectedCount.value = 0
|
|
tableData.value = []
|
|
total.value = 0
|
|
}
|
|
|
|
|
|
// 编辑方法
|
|
const handleEdit = (id: number) => {
|
|
editDialog.value.open(id)
|
|
}
|
|
|
|
// 新增方法
|
|
const handleAdd = () => {
|
|
createDialog.value.open()
|
|
getTableData()
|
|
}
|
|
|
|
// 删除方法
|
|
const handleDelete = async (row: TableItem) => {
|
|
try {
|
|
// 添加确认对话框
|
|
await ElMessageBox.confirm(
|
|
'确定要删除这条记录吗？',
|
|
'警告',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
|
|
await itemsApi.deleteitems(row.id)
|
|
ElMessage.success('删除成功')
|
|
getTableData()
|
|
} catch (error) {
|
|
if (error === 'cancel') {
|
|
ElMessage.info('已取消删除')
|
|
return
|
|
}
|
|
console.error('删除失败:', error)
|
|
ElMessage.error('删除失败')
|
|
}
|
|
}
|
|
|
|
const handleSizeChange = (val: number) => {
|
|
pageSize.value = val
|
|
getTableData()
|
|
}
|
|
const handleCurrentChange = (val: number) => {
|
|
currentPage.value = val
|
|
getTableData()
|
|
}
|
|
|
|
// 初始化数据加载
|
|
const initData = async () => {
|
|
try {
|
|
// 并行加载数据以提高性能
|
|
await Promise.all([
|
|
getDepartmentList(),
|
|
getTableData()
|
|
])
|
|
} catch (error) {
|
|
console.error('初始化数据加载失败:', error)
|
|
ElMessage.error('数据加载失败，请刷新页面重试')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
initData()
|
|
})
|
|
|
|
// 修改编辑对话框的监听
|
|
watch(editDialogVisible, (newVal) => {
|
|
if (!newVal) {
|
|
getTableData()
|
|
}
|
|
})
|
|
|
|
// 添加计算折扣价的方法
|
|
const calculateDiscountedPrice = (price: number, discount: number): number => {
|
|
if (!price || !discount) return 0;
|
|
return Number((price - price * (discount / 100)).toFixed(2));
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.base-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-area {
|
|
margin-bottom: 20px;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.operation-area {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.selection-tip {
|
|
margin-bottom: 20px;
|
|
color: #606266;
|
|
}
|
|
|
|
.pagination-container {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|