jiangs/lis8.0-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

报告单设置

Browse Source
This commit is contained in:
tangw 2025-12-25 20:15:47 +08:00
parent 35c8603002
commit 5d09d6ebec
3 changed files with 559 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/liswork/xtwh/reportdictApi.ts
View File

@ -52,3 +52,12 @@ export function autoload() {
method: 'get'
})
}
// 查询字典列表
export function optionselect(params:any) {
return request({
url: '/reportdict/optionselect',
method: 'get',
params
})
}

47
src/api/liswork/xtwh/reportinstrApi.ts Normal file
View File

@ -0,0 +1,47 @@
//参数设置字典
// @ts-ignore
import request from '@/utils/request'
// 查询字典列表
export function listreportinstr(params:any) {
return request({
url: '/reportinstr/list',
method: 'get',
params
})
}
// 查询字典详细
export function getreportinstr(id:number) {
return request({
url: `/reportinstr/${id}`,
method: 'get'
})
}
// 新增字典
export function addreportinstr(params:any) {
return request({
url: '/reportinstr',
method: 'post',
data:params
})
}
// 修改字典
export function updatereportinstr(params:any) {
return request({
url: '/reportinstr',
method: 'put',
data:params
})
}
// 删除字典
export function delreportinstr(id:any) {
return request({
url: `/reportinstr/${id}`,
method: 'delete'
})
}

508
src/views/liswork/xtwh/comopt/components/sysReport/index.vue
View File

@ -1,12 +1,510 @@
<!-- 报告界面参数 -->
<template>
<div>
报告界面参数
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdateBatch">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDeleteBatch">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" icon="Refresh" @click="handleQuery">刷新</el-button>
</el-col>
</el-row>
<el-row :gutter="5" class="table-container">
<el-table
v-loading="loading"
:data="reportinstrList"
@selection-change="handleSelectionChange"
class="report-table"
height="100%"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="reportId" v-if="false"/>
<el-table-column label="仪器" align="center" prop="reportYq" v-if="false" show-overflow-tooltip />
<el-table-column label="模板ID" align="left" prop="reportBgdh" width="50" show-overflow-tooltip />
<el-table-column label="模板名称" align="left" prop="reportName" show-overflow-tooltip />
<el-table-column label="类别" align="center" prop="reportType" width="50" show-overflow-tooltip>
<template #default="scope">
<span>
{{ reportTypeOptions.find(item => item.value === scope.row.reportType)?.label || scope.row.reportType }}
</span>
</template>
</el-table-column>
<el-table-column label="纸张" align="center" prop="reportSize" width="50">
<template #default="scope">
<span>
{{ reportSizeOptions.find(item => item.value === scope.row.reportSize)?.label || scope.row.reportSize }}
</span>
</template>
</el-table-column>
<el-table-column label="固定行数" align="center" prop="reportRows" width="80"show-overflow-tooltip />
<el-table-column label="最小行数" align="center" prop="reportMinrows" width="80"show-overflow-tooltip />
<el-table-column label="最大行数" align="center" prop="reportMaxrows" width="80"show-overflow-tooltip />
<el-table-column label="指定项目" align="center" prop="reportItems" show-overflow-tooltip />
<el-table-column label="排序" align="center" prop="reportSort" width="80" />
<el-table-column label="状态" align="center" prop="status" width="80">
<template #default="scope">
<!-- 修正：dict-tag 若为自定义组件需确保引入，否则替换为普通文本 -->
<span :class="scope.row.status === '0' ? 'status-normal' : 'status-disable'">
{{ scope.row.status === '0' ? '正常' : '禁用' }}
</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="150" show-overflow-tooltip>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!-- 添加或修改字典对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="reportinstrRef" :model="form" :rules="rules" label-width="150px">
<el-form-item :label="`${menuname}模板`" prop="reportBgdh">
<el-select
v-model="form.reportBgdh"
:placeholder="`请选择${menuname}模板`"
style="width: 100%"
>
<el-option
v-for="item in dictOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="`${menuname}类别`" prop="reportType">
<el-select
v-model="form.reportType"
:placeholder="`请选择${menuname}类别`"
style="width: 100%"
>
<el-option
v-for="item in reportTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="`${menuname}纸张类型`" prop="reportSize">
<el-select
v-model="form.reportSize"
:placeholder="`请选择${menuname}纸张类型`"
style="width: 100%"
>
<el-option
v-for="item in reportSizeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="`${menuname}固定行数`" prop="reportRows">
<el-input v-model.number="form.reportRows" :placeholder="`请输入${menuname}固定行数`" />
</el-form-item>
<el-form-item :label="`${menuname}最小行数`" prop="reportMinrows">
<el-input v-model.number="form.reportMinrows" :placeholder="`请输入${menuname}最小行数`" />
</el-form-item>
<el-form-item :label="`${menuname}最大行数`" prop="reportMaxrows">
<el-input v-model.number="form.reportMaxrows" :placeholder="`请输入${menuname}最大行数`" />
</el-form-item>
<el-form-item :label="`${menuname}指定项目`" prop="reportItems">
<el-input v-model="form.reportItems" :placeholder="`请输入${menuname}指定项目`" />
</el-form-item>
<el-form-item label="顺序" prop="reportSort">
<el-input-number v-model="form.reportSort" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="0">正常</el-radio>
<el-radio label="1">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
<script setup name="reportinstr" lang="ts">
import { ref, reactive, toRefs, watch, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElForm } from 'element-plus';
// 导入类型定义（若项目有axios封装，需补充AxiosResponse类型）
// 导入API（确保API返回Promise<AxiosResponse>）
import {
addreportinstr,
delreportinstr,
getreportinstr,
listreportinstr,
updatereportinstr
} from "@/api/liswork/xtwh/reportinstrApi";
import {optionselect} from "@/api/liswork/xtwh/reportdictApi";
// 导入时间格式化工具（确保存在）
import { parseTime } from "@/utils/ruoyi.js";
// ========== 1. 修正：TypeScript 类型定义 ==========
interface ReportItem {
reportId: number;
reportYq: string;
reportBgdh: string;
reportType: string;
reportSize: string;
reportRows: number;
reportMinrows: number;
reportMaxrows: number;
reportItems: string;
reportSort: number;
status: string;
remark: string;
createTime?: string; // 可选属性
reportName: string;
}
// ========== 2. 修正：响应式变量定义 ==========
// 下拉选项
const reportTypeOptions = ref([
{ label: "常规报告", value: "0" },
{ label: "细菌阴性", value: "1" },
{ label: "细菌阳性", value: "2" },
{ label: "初步报告", value: "3" },
{ label: "二级报告", value: "4" }
]);
const reportSizeOptions = ref([
{ label: "默认", value: "0" },
{ label: "A5", value: "1" },
{ label: "A4", value: "2" }
]);
// 父组件传值
const yq = defineModel<string>();
// 列表数据
const reportinstrList = ref<ReportItem[]>([]);
// 弹窗状态
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref<number[]>([]); // 修正：明确类型为number[]
const single = ref(true); // 批量修改禁用：true=禁用（选中数!=1）
const multiple = ref(true); // 批量删除禁用：true=禁用（选中数=0）
const total = ref(0);
const title = ref("");
const menuname = ref("仪器报告模板");
// 表单相关（修正：响应式定义 + 初始值类型）
const data = reactive({
form: {
reportId: undefined as number | undefined,
reportYq: "",
reportBgdh: "",
reportType: "",
reportSize: "2",
reportRows: undefined,
reportMinrows: undefined,
reportMaxrows: undefined,
reportItems: "",
reportSort: 0,
status: "0", // 默认正常
remark: ""
},
queryParams: {
reportYq: undefined as string | undefined,
reportBgdh: undefined as string | undefined,
status: undefined as string | undefined,
},
// 修正：表单校验规则（动态文本需用函数）
rules: {
reportBgdh: [{
required: true,
message: () => `${menuname.value}名称不能为空`,
trigger: "blur"
}],
reportYq: [{
required: true,
message: () => `${menuname.value}仪器不能为空`,
trigger: "blur"
}],
reportSort: [{
required: true,
message: () => `${menuname.value}顺序不能为空`,
trigger: "blur"
}],
}
});
const { queryParams, form, rules } = toRefs(data);
interface SelectOption {
label: string;
value: string;
}
// 修正：获取表单Ref（Vue3 + TS 正确写法）
const reportinstrRef = ref<InstanceType<typeof ElForm>>();
const queryRef = ref<InstanceType<typeof ElForm>>();
const dictOptions = ref<SelectOption[]>([]); // 下拉/字典选项列表
const dictLoading = ref(false); // 字典加载状态
async function loadApiDict() {
const dictType ="0";
try {
dictLoading.value = true;
const response = await optionselect({ reportType: dictType })
if (response.code === 200 && Array.isArray(response.data)) {
dictOptions.value = response.data.map(item => ({
label: item.reportName || "",
value: item.reportId || ""
}));
} else {
ElMessage.warning("模板无有效数据");
}
} catch (error) {
ElMessage.error("字典请求失败");
console.error("字典API异常：", { dictType, error });
} finally {
dictLoading.value = false;
}
}
// ========== 3. 修正：核心方法 ==========
/** 查询列表 */
const getList = async (): Promise<void> => {
loading.value = true;
try {
// 修正：API入参格式（确保和后端一致）
queryParams.value.reportYq=yq.value
const response = await listreportinstr(queryParams.value)
reportinstrList.value = JSON.parse(JSON.stringify(response.data));
total.value = response.data.length;
} catch (error) {
ElMessage.error(`获取列表异常：${(error as Error).message}`);
} finally {
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
open.value = false;
reset();
};
/** 表单重置 */
const reset = () => {
form.value = {
reportId: undefined,
reportYq: yq.value||"",
reportBgdh: "",
reportType: "",
reportSize: "2",
reportRows: undefined,
reportMinrows: undefined,
reportMaxrows: undefined,
reportItems: "",
reportSort: 0,
status: "0",
remark: ""
};
// 修正：重置表单校验状态
if (reportinstrRef.value) {
reportinstrRef.value.clearValidate();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
// 修正：重置搜索表单
if (queryRef.value) {
queryRef.value.resetFields();
}
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: ReportItem[]) => {
ids.value = selection.map(item => item.reportId);
// 修正：批量按钮禁用逻辑
single.value = selection.length !== 1; // 选中数!=1 → 批量修改禁用
multiple.value = selection.length === 0; // 选中数=0 → 批量删除禁用
};
/** 新增按钮操作 */
const handleAdd = () => {
loadApiDict();
reset();
open.value = true;
title.value = `添加${menuname.value}`;
};
/** 批量修改按钮（原handleUpdate重名，拆分） */
const handleUpdateBatch = () => {
if (ids.value.length !== 1) {
ElMessage.warning("请选择一条数据进行修改");
return;
}
handleUpdate({ reportId: ids.value[0] } as ReportItem);
};
/** 单行修改按钮 */
const handleUpdate = async (row: ReportItem) => {
reset();
const reportId = row.reportId;
try {
const response = await getreportinstr(reportId)
form.value = response.data;
open.value = true;
title.value = `修改${menuname.value}`;
} catch (error) {
ElMessage.error(`获取详情失败：${(error as Error).message}`);
}
};
/** 提交按钮 */
const submitForm = async () => {
if (!reportinstrRef.value) return;
// 修正：Vue3 表单校验写法
try {
await reportinstrRef.value.validate();
if (form.value.reportId !== undefined) {
// 修改
await updatereportinstr(form.value);
ElMessage.success("修改成功");
} else {
// 新增
await addreportinstr(form.value);
ElMessage.success("新增成功");
}
open.value = false;
getList();
} catch (error) {
ElMessage.error("表单校验失败，请检查必填项");
}
};
/** 批量删除按钮（原handleDelete重名，拆分） */
const handleDeleteBatch = () => {
if (ids.value.length === 0) {
ElMessage.warning("请选择至少一条数据进行删除");
return;
}
handleDelete({ reportId: ids.value } as unknown as ReportItem);
};
/** 单行删除按钮 */
const handleDelete = async (row: ReportItem) => {
const reportIds = Array.isArray(row.reportId) ? row.reportId : [row.reportId];
try {
await ElMessageBox.confirm(
`是否确认删除${menuname.value}编号为${reportIds.join(",")}的数据项？`,
"确认删除",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
);
await delreportinstr(reportIds);
ElMessage.success("删除成功");
getList();
} catch (error) {
// 取消删除不提示
if (error !== "cancel") {
ElMessage.error(`删除失败：${(error as Error).message}`);
}
}
};
/** 导出按钮操作（修正：参数传递 + 接口路径） */
const handleExport = () => {
};
// ========== 4. 修正：生命周期 + 监听 ==========
// 补充：获取当前实例（用于proxy）
import { getCurrentInstance } from 'vue';
// 监听yq变化
watch(yq, (newVal) => {
if (newVal !== undefined) {
getList();
}
}, { immediate: true, deep: true });
// 修正：初始化调用（避免重复调用）
onMounted(() => {
getList();
});
</script>
<style scoped></style>
<style scoped>
.app-container {
display: flex;
flex-direction: column;
height: 90vh;
overflow: hidden;
}
.mb8 {
height: 30px;
margin-bottom: 8px; /* 补充margin，避免按钮重叠 */
}
.table-container {
flex: 1;
overflow: hidden;
}
/* 状态样式（替换dict-tag） */
.status-normal {
color: #67c23a;
font-weight: 500;
}
.status-disable {
color: #f56c6c;
font-weight: 500;
}
/* 减小表格行高 */
:deep(.report-table .el-table__row) {
height: 30px !important;
line-height: 30px !important;
}
/* 减小单元格内边距 */
:deep(.report-table .el-table__cell) {
padding: 2px 4px !important;
height: 30px !important;
line-height: 1.2 !important;
vertical-align: middle !important;
font-size: 12px; /* 补充字体大小，适配矮行 */
}
/* 优化操作列按钮 */
:deep(.report-table .el-button--link) {
padding: 0 4px !important;
font-size: 12px !important;
}
/* 对话框按钮间距 */
.dialog-footer {
text-align: center;
}
</style>