检验条码打印
This commit is contained in:
parent
6392c9b632
commit
680756464f
@ -182,3 +182,9 @@ aside {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -8,14 +8,16 @@
|
||||
<el-button circle icon="Refresh" @click="refresh()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
||||
<el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
||||
<el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'" />
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px"
|
||||
v-if="showColumnsType == 'checkbox'">
|
||||
<el-button circle icon="Menu" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<template v-for="item in columns" :key="item.key">
|
||||
<el-dropdown-item>
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)"
|
||||
:label="item.label" />
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
@ -24,12 +26,7 @@
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-dialog :title="title" v-model="open" append-to-body>
|
||||
<el-transfer
|
||||
:titles="['显示', '隐藏']"
|
||||
v-model="value"
|
||||
:data="columns"
|
||||
@change="dataChange"
|
||||
></el-transfer>
|
||||
<el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,7 +59,7 @@ const props = defineProps({
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:showSearch', 'queryTable']);
|
||||
const emits = defineEmits(['update:showSearch', 'queryTable', 'updateColumns']);
|
||||
|
||||
// 显隐数据
|
||||
const value = ref([]);
|
||||
@ -114,6 +111,9 @@ if (props.showColumnsType == 'transfer') {
|
||||
// 勾选
|
||||
function checkboxChange(event, label) {
|
||||
props.columns.filter(item => item.label == label)[0].visible = event;
|
||||
|
||||
emits("updateColumns", toRaw(props.columns));
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -124,9 +124,11 @@ function checkboxChange(event, label) {
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
:deep(.el-transfer__button:first-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item) {
|
||||
line-height: 30px;
|
||||
padding: 0 17px;
|
||||
|
||||
291
src/components/tableCom/index.vue
Normal file
291
src/components/tableCom/index.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="custom-table-wrapper">
|
||||
<!-- 表格主体 -->
|
||||
<el-table ref="tableRef" :data="tableData" :loading="loading" :stripe="config.stripe || false"
|
||||
:border="config.border" :fit="config.fit !== true" :show-header="config.showHeader !== false"
|
||||
:highlight-current-row="config.highlightCurrentRow || false" :row-class-name="config.rowClassName"
|
||||
:header-cell-style="config.headerCellStyle" :cell-style="config.cellStyle" :max-height="config.maxHeight"
|
||||
:height="config.height" :size="config.size || 'default'" :empty-text="config.emptyText || '暂无数据'"
|
||||
@selection-change="handleSelectionChange" @current-change="handleCurrentChange" @row-click="handleRowClick"
|
||||
@row-dblclick="handleRowDblclick" @sort-change="handleSortChange" v-bind="$attrs">
|
||||
<!-- 多选列 -->
|
||||
<el-table-column v-if="config.selection" type="selection" :width="config.selectionWidth || 55"
|
||||
:fixed="config.selectionFixed" align="center" />
|
||||
|
||||
<!-- 序号列 -->
|
||||
<el-table-column v-if="config.index" type="index" :label="config.indexLabel || '序号'"
|
||||
:width="config.indexWidth || 60" :fixed="config.indexFixed" align="center" :index="getIndex" />
|
||||
|
||||
<!-- 动态列 -->
|
||||
<template v-for="column in columns" :key="column.prop || column.key">
|
||||
<!-- 自定义插槽列 -->
|
||||
<el-table-column v-if="column.slot && column.visible" :prop="column.prop" :label="column.label"
|
||||
:width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :align="column.align || 'left'"
|
||||
:sortable="column.sortable" :show-overflow-tooltip="column.showOverflowTooltip !== false">
|
||||
<template #default="scope">
|
||||
<slot :name="column.slot" :row="scope.row" :column="scope.column" :$index="scope.$index" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 普通列 -->
|
||||
<el-table-column v-if="!column.slot && column.visible" :prop="column.prop" :label="column.label"
|
||||
:width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :align="column.align || 'left'"
|
||||
:sortable="column.sortable" :show-overflow-tooltip="column.showOverflowTooltip !== false"
|
||||
:formatter="column.formatter">
|
||||
<!-- 表头插槽 -->
|
||||
<template v-if="column.headerSlot" #header="scope">
|
||||
<slot :name="column.headerSlot" :column="scope.column" :$index="scope.$index" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<el-table-column v-if="$slots.action" :label="config.actionLabel || '操作'" :width="config.actionWidth"
|
||||
:min-width="config.actionMinWidth || 120" :fixed="config.actionFixed || 'right'"
|
||||
:align="config.actionAlign || 'center'">
|
||||
<template #default="scope">
|
||||
<slot name="action" :row="scope.row" :column="scope.column" :$index="scope.$index" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 空数据插槽 -->
|
||||
<template v-if="$slots.empty" #empty>
|
||||
<slot name="empty" />
|
||||
</template>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<div v-if="pagination.show" class="pagination-wrapper">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="currentPageSize" :total="pagination.total"
|
||||
:page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
|
||||
:layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
|
||||
:background="pagination.background !== false" :small="pagination.small || false"
|
||||
:disabled="pagination.disabled || false" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentPageChange" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch, PropType } from "vue";
|
||||
import { TableColumnCtx } from 'element-plus';
|
||||
interface TableColumn {
|
||||
prop?: string;
|
||||
key?: string;
|
||||
label?: string;
|
||||
width?: string | number;
|
||||
minWidth?: string | number;
|
||||
fixed?: boolean | string;
|
||||
align?: string;
|
||||
sortable?: boolean;
|
||||
showOverflowTooltip?: boolean;
|
||||
formatter?: Function;
|
||||
slot?: string;
|
||||
headerSlot?: string;
|
||||
visible?: boolean; // 是否显示列
|
||||
}
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps({
|
||||
// 表格数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 表格列配置
|
||||
columns: {
|
||||
type: Array as PropType<TableColumn[]>,
|
||||
default: () => [],
|
||||
},
|
||||
// 表格配置
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 分页配置
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
show: false,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Emits 定义
|
||||
const emit = defineEmits([
|
||||
"selection-change",
|
||||
"current-change",
|
||||
"row-click",
|
||||
"row-dblclick",
|
||||
"sort-change",
|
||||
"page-change",
|
||||
"size-change",
|
||||
]);
|
||||
|
||||
// 响应式数据
|
||||
const tableRef = ref();
|
||||
const currentPage = ref(props.pagination.currentPage || 1); // 第几页
|
||||
const currentPageSize = ref(props.pagination.pageSize || 10); // 一页显示多少条
|
||||
|
||||
// 计算属性
|
||||
const tableData = computed(() => {
|
||||
if (props.pagination.show && props.pagination.clientPaging) {
|
||||
// 客户端分页
|
||||
const start = (currentPage.value - 1) * currentPageSize.value;
|
||||
const end = start + currentPageSize.value;
|
||||
return props.data.slice(start, end);
|
||||
}
|
||||
return props.data;
|
||||
});
|
||||
|
||||
// 序号计算
|
||||
const getIndex = (index: number) => {
|
||||
if (props.pagination.show && !props.pagination.clientPaging) {
|
||||
return (currentPage.value - 1) * currentPageSize.value + index + 1;
|
||||
}
|
||||
return index + 1;
|
||||
};
|
||||
|
||||
// 事件处理
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
emit("selection-change", selection);
|
||||
};
|
||||
|
||||
const handleCurrentChange = (currentRow: any, oldCurrentRow: any) => {
|
||||
emit("current-change", currentRow, oldCurrentRow);
|
||||
};
|
||||
|
||||
const handleRowClick = (row: any, column: TableColumnCtx<any>, event: Event) => {
|
||||
emit("row-click", row, column, event);
|
||||
};
|
||||
|
||||
const handleRowDblclick = (row: any, column: TableColumnCtx<any>, event: Event) => {
|
||||
emit("row-dblclick", row, column, event);
|
||||
};
|
||||
|
||||
const handleSortChange = (sortInfo: Object) => {
|
||||
emit("sort-change", sortInfo);
|
||||
};
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
currentPageSize.value = size;
|
||||
currentPage.value = 1;
|
||||
emit("size-change", {
|
||||
pageSize: size,
|
||||
currentPage: 1,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCurrentPageChange = (page: number) => {
|
||||
currentPage.value = page;
|
||||
emit("page-change", {
|
||||
currentPage: page,
|
||||
pageSize: currentPageSize.value,
|
||||
});
|
||||
};
|
||||
|
||||
// 监听分页配置变化
|
||||
watch(
|
||||
() => props.pagination.currentPage,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
currentPage.value = newVal;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.pagination.pageSize,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
currentPageSize.value = newVal;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 暴露方法
|
||||
const clearSelection = () => {
|
||||
tableRef.value?.clearSelection();
|
||||
};
|
||||
|
||||
const toggleRowSelection = (row: Object, selected: boolean) => {
|
||||
tableRef.value?.toggleRowSelection(row, selected);
|
||||
};
|
||||
|
||||
const toggleAllSelection = () => {
|
||||
tableRef.value?.toggleAllSelection();
|
||||
};
|
||||
|
||||
const setCurrentRow = (row: Object) => {
|
||||
tableRef.value?.setCurrentRow(row);
|
||||
};
|
||||
|
||||
const clearSort = () => {
|
||||
tableRef.value?.clearSort();
|
||||
};
|
||||
|
||||
const doLayout = () => {
|
||||
tableRef.value?.doLayout();
|
||||
};
|
||||
|
||||
const sort = (prop: string, order: any) => {
|
||||
tableRef.value?.sort(prop, order);
|
||||
};
|
||||
|
||||
// 导出方法
|
||||
defineExpose({
|
||||
clearSelection,
|
||||
toggleRowSelection,
|
||||
toggleAllSelection,
|
||||
setCurrentRow,
|
||||
clearSort,
|
||||
doLayout,
|
||||
sort,
|
||||
tableRef,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-table-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 0;
|
||||
margin-top: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* 修改选中行背景色 */
|
||||
::v-deep .el-table__body tr.current-row>td {
|
||||
background-color: #add7f7 !important;
|
||||
}
|
||||
|
||||
/* 可选：修改悬停颜色 */
|
||||
::v-deep .el-table__body tr.hover-row>td {
|
||||
background-color: #326ca5 !important;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.pagination-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination-wrapper :deep(.el-pagination) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
src/env.d.ts
vendored
Normal file
5
src/env.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
375
src/views/checkCode/index.vue
Normal file
375
src/views/checkCode/index.vue
Normal file
@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div class="app-container ">
|
||||
<div ref="compactForm">
|
||||
<el-row :gutter="10" class="compact-form" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="queryRules">
|
||||
<el-form-item label="日期：" prop="failed1">
|
||||
<el-date-picker v-model="queryParams.failed1" type="daterange" range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="医疗机构：" prop="failed2">
|
||||
<el-select v-model="queryParams.failed2" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条码状态：" prop="failed3">
|
||||
<el-select v-model="queryParams.failed3" placeholder="请选择" style="width: 120px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="failed4">
|
||||
<el-select v-model="queryParams.failed4" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="failed5">
|
||||
<el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="">
|
||||
<el-button icon="search" type="primary" @click="handleQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="16" class="right-table">
|
||||
<div class="title"> 条码生成 </div>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus">生成条码</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Edit">选中所有未打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain>打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Upload" @click="openBlock">采样登记</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain @click="openSj">送检登记</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain @click="goReport">报告查询</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain>条码作废</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain>打印机设置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain>清单打印</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
|
||||
:columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<CustomTable :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
|
||||
<template #tfailed5="{ row }">
|
||||
{{ row.tfailed5 }}
|
||||
</template>
|
||||
</CustomTable>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="8" class="right-table">
|
||||
<div class="title"> 项目 </div>
|
||||
<el-button type="danger" class="mb10">拆分选中项目</el-button>
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
||||
</CustomTable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 采样登记 -->
|
||||
<el-dialog v-model="dialogVisible" title="采样登记" draggable :close-on-click-modal="false">
|
||||
<div class="flex-between">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain>读取</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="delete">删除选中行</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain>打印</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button type="primary" plain>保存</el-button>
|
||||
</div>
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
||||
</CustomTable>
|
||||
|
||||
</el-dialog>
|
||||
<!-- 送检登记 -->
|
||||
<el-dialog v-model="dialogSjVisible" title="送检登记" draggable :close-on-click-modal="false">
|
||||
<div class="flex-between">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-input v-model="queryParams.failed5" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain>读取</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="delete">删除选中行</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain>打印</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button type="primary" plain>保存</el-button>
|
||||
</div>
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
||||
</CustomTable>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted } from 'vue';
|
||||
import CustomTable from '@/components/tableCom/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// import { download } from '@/api/liswork/dict/LabInstr.js'
|
||||
const router = useRouter()
|
||||
const compactForm = ref<HTMLElement | null>(null);
|
||||
const heightForm = ref(90);
|
||||
const dialogVisible = ref(false)
|
||||
const openBlock = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const dialogSjVisible = ref(false)
|
||||
const openSj = () => {
|
||||
dialogSjVisible.value = true
|
||||
}
|
||||
// 提交表单数据
|
||||
const queryParams = reactive({
|
||||
failed1: [],
|
||||
failed2: '',
|
||||
failed3: '',
|
||||
failed4: '',
|
||||
failed5: '',
|
||||
});
|
||||
const showSearch = ref(true);
|
||||
const queryRef = ref()
|
||||
// 定义校验规则
|
||||
const queryRules = ref({
|
||||
// clientId: [
|
||||
// { required: true, message: '编号不能为空', trigger: 'blur' },
|
||||
|
||||
// ],
|
||||
|
||||
// failed3: [
|
||||
// { required: true, message: '条码状态不能为空', trigger: 'change' },
|
||||
// ],
|
||||
})
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
|
||||
]
|
||||
const handleQuery = async () => {
|
||||
const valid = await queryRef.value.validate().catch(() => { });
|
||||
if (!valid) return false;
|
||||
}
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryRef.value?.resetFields();
|
||||
// download([20221201167817]).then(() => {
|
||||
// console.log('重置成功');
|
||||
// }).catch(() => {
|
||||
// console.log('重置失败');
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
const loading = false;
|
||||
|
||||
|
||||
|
||||
// 数据源
|
||||
const tableData = [
|
||||
{
|
||||
id: 1, tfailed2: '张三', tfailed1: 24, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
|
||||
tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
|
||||
tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
|
||||
},
|
||||
{
|
||||
id: 2, tfailed2: '李四', tfailed1: 25, tfailed3: '男', tfailed4: '血常规', tfailed5: '常规检查',
|
||||
tfailed6: '无', tfailed7: '否', tfailed8: '血液样本', tfailed9: '1234567890', tfailed10: '内科', tfailed11: 'A1234567890',
|
||||
tfailed12: '待处理', tfailed13: '门诊', tfailed14: '王医生', tfailed15: '2023-10-01 10:00', tfailed16: '计价标志', tfailed17: '执行医生', tfailed18: '送检人', tfailed19: '医疗机构'
|
||||
}
|
||||
]
|
||||
// 配置项
|
||||
const columns = ref([
|
||||
{ prop: 'tfailed1', label: '床号', visible: true, key: 0, sortable: true, width: '110px' },
|
||||
{ prop: 'tfailed2', label: '姓名', visible: true, key: 1, width: '110px' },
|
||||
{ prop: 'tfailed3', label: '性别', align: 'center', visible: true, key: 2, },
|
||||
{ prop: 'tfailed4', label: '项目名称', align: 'center', visible: true, key: 3, width: '110px' },
|
||||
{ prop: 'tfailed5', label: '类别', align: 'center', visible: true, key: 4, slot: 'tfailed5', width: '110px' },
|
||||
{ prop: 'tfailed6', label: '采样提示', align: 'center', visible: true, key: 5, width: '110px' },
|
||||
{ prop: 'tfailed7', label: '急诊', align: 'center', visible: true, key: 6, width: '110px' },
|
||||
{ prop: 'tfailed8', label: '样本类型', align: 'center', visible: true, key: 7, width: '110px' },
|
||||
{ prop: 'tfailed9', label: '病人号', align: 'center', visible: true, key: 8, width: '110px' },
|
||||
{ prop: 'tfailed10', label: '科室名称', align: 'center', visible: true, key: 9, width: '110px' },
|
||||
{ prop: 'tfailed11', label: '申请号/条码', align: 'center', visible: true, key: 10, width: '110px' },
|
||||
{ prop: 'tfailed12', label: '状态', align: 'center', visible: true, key: 11, width: '110px' },
|
||||
{ prop: 'tfailed13', label: '病人来源', align: 'center', visible: true, key: 12, width: '110px' },
|
||||
{ prop: 'tfailed14', label: '申请医生', align: 'center', visible: true, key: 13, width: '110px' },
|
||||
{ prop: 'tfailed15', label: '申请时间', align: 'center', visible: true, key: 14, width: '150px' },
|
||||
{ prop: 'tfailed16', label: '计价标志', align: 'center', visible: true, key: 15, width: '110px' },
|
||||
{ prop: 'tfailed17', label: '执行医生', align: 'center', visible: true, key: 16, width: '110px' },
|
||||
{ prop: 'tfailed18', label: '送检人', align: 'center', visible: true, key: 17, width: '110px' },
|
||||
{ prop: 'tfailed19', label: '医疗机构', align: 'center', visible: true, key: 18, width: '110px' },
|
||||
])
|
||||
|
||||
|
||||
// 单元格样式
|
||||
const cellStyleHd = ({ row, column, rowIndex, columnIndex }: {
|
||||
row: any;
|
||||
column: any;
|
||||
rowIndex: number;
|
||||
columnIndex: number;
|
||||
}) => {
|
||||
// console.log(row, column, rowIndex, columnIndex);
|
||||
if (row.tfailed5 == "常规检查" && columnIndex == 5) {
|
||||
// console.log(row, column, rowIndex, columnIndex);
|
||||
return { background: '#f00 !important', color: '#fff' };
|
||||
}
|
||||
};
|
||||
|
||||
const rowClassNameHd = ({ row, rowIndex }: {
|
||||
row: any;
|
||||
rowIndex: number;
|
||||
}) => {
|
||||
return 'custom-row-class'; // 返回自定义类名
|
||||
};
|
||||
// 表格配置
|
||||
const tableConfig = ref({
|
||||
// stripe: true, // 斑马纹
|
||||
border: false, // 边框
|
||||
selection: true, // 多选框
|
||||
index: false, // 序号
|
||||
height: '100%', // 高度
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
cellStyle: cellStyleHd,
|
||||
rowClassName: rowClassNameHd,
|
||||
fit: true
|
||||
})
|
||||
|
||||
|
||||
|
||||
interface ColumnItem {
|
||||
prop: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
key: number;
|
||||
align: string;
|
||||
slot: string;
|
||||
width: string;
|
||||
}
|
||||
// 更新列
|
||||
const updateColumns = (arr: Array<ColumnItem>) => {
|
||||
columns.value = arr
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 右侧数据源
|
||||
const rightTableData = [
|
||||
{
|
||||
id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 1, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
]
|
||||
// 配置项
|
||||
const rightColumns = ref([
|
||||
{ prop: 'tfailed1', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
|
||||
{ prop: 'tfailed2', label: '项目名称', visible: true, key: 1 },
|
||||
{ prop: 'tfailed3', label: '单价', align: 'center', visible: true, key: 2 },
|
||||
{ prop: 'tfailed4', label: '数量', align: 'center', visible: true, key: 3 },
|
||||
{ prop: 'tfailed5', label: '状态', align: 'center', visible: true, key: 4 },
|
||||
{ prop: 'tfailed6', label: '计价标志', align: 'center', visible: true, key: 5 },
|
||||
|
||||
])
|
||||
// 表格配置
|
||||
const rightTableConfig = ref({
|
||||
// stripe: true, // 斑马纹
|
||||
border: false, // 边框
|
||||
selection: true, // 多选框
|
||||
index: false, // 序号
|
||||
height: '100%', // 高度
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
})
|
||||
|
||||
|
||||
const goReport = () => {
|
||||
// 跳转到报告查询页面
|
||||
router.push('/report')
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
adjustTableHeight();
|
||||
|
||||
});
|
||||
|
||||
// 计算table高度
|
||||
watch(showSearch, () => {
|
||||
nextTick(() => {
|
||||
adjustTableHeight();
|
||||
})
|
||||
}, { immediate: true });
|
||||
|
||||
function adjustTableHeight() {
|
||||
if (compactForm.value) {
|
||||
// 获取高度
|
||||
heightForm.value = compactForm.value.offsetHeight;
|
||||
tableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
|
||||
rightTableConfig.value.height = `calc(75vh - ${heightForm.value}px)`; // 设置表格容器的高度
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-row-class {
|
||||
background-color: #c6c3ff !important;
|
||||
/* 设置行背景色 */
|
||||
}
|
||||
|
||||
.right-table {
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
376
src/views/checkCode/report/index.vue
Normal file
376
src/views/checkCode/report/index.vue
Normal file
@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div ref="compactForm">
|
||||
<el-row :gutter="10" class="compact-form" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="queryRules">
|
||||
<el-form-item label="日期：" prop="failed1">
|
||||
<el-date-picker v-model="queryParams.failed1" type="daterange" range-separator="-" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="病人状态：" prop="failed2">
|
||||
<el-select v-model="queryParams.failed2" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="科室：" prop="failed3">
|
||||
<el-select v-model="queryParams.failed3" placeholder="请选择" style="width: 120px;">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="病人类型：" prop="failed4">
|
||||
<el-select v-model="queryParams.failed4" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="failed5">
|
||||
<el-radio-group v-model="queryParams.failed5">
|
||||
<el-radio label="1">仅危急值</el-radio>
|
||||
<el-radio label="2">仅急诊</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="failed6">
|
||||
<el-col :span="1.5">
|
||||
<el-input v-model="queryParams.failed6" clearable placeholder="姓名" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="病人号" prop="failed7">
|
||||
<el-col :span="1.5">
|
||||
<el-input v-model="queryParams.failed7" clearable placeholder="病人号" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="条形码" prop="failed8">
|
||||
<el-col :span="1.5">
|
||||
<el-input v-model="queryParams.failed8" clearable placeholder="条形码" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button icon="search" type="primary" @click="handleQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="14" class="right-table">
|
||||
<el-row :gutter="10" class="mb8 mt10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus">打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Edit">勾选中所有未打印</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain>打印单张PDF报告</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Upload">GUID打印报告</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
|
||||
:columns="columns"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<CustomTable :data="tableData" :columns="columns" :config="tableConfig" :loading="loading">
|
||||
|
||||
</CustomTable>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10" class="right-table">
|
||||
<div class="title">检验结果</div>
|
||||
<div class="mb10">
|
||||
<el-button type="primary" @click="openDB">对比历史</el-button>
|
||||
<el-button type="primary">复制全部数据</el-button>
|
||||
<el-button type="primary">复制异常数据</el-button>
|
||||
<el-button type="primary">复制正常数据</el-button>
|
||||
<el-button type="primary">知识库</el-button>
|
||||
</div>
|
||||
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig" :loading="loading">
|
||||
</CustomTable>
|
||||
|
||||
<div class="title mt10">检验结果</div>
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="bottomTableConfig" :loading="loading">
|
||||
</CustomTable>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 结果对比 -->
|
||||
<el-dialog v-model="dialogVisible" title="结果对比" draggable :close-on-click-modal="false">
|
||||
<div class="flex-between">
|
||||
|
||||
</div>
|
||||
<el-table :data="compareTableData" border style="width: 100%" @row-click="handleRowClick" highlight-current-row>
|
||||
<el-table-column prop="itemName" label="项目名称" fixed />
|
||||
<el-table-column prop="itemCode" label="项目编号" fixed />
|
||||
<template v-for="(period, idx) in periods" :key="period.key">
|
||||
<el-table-column :label="period.label" prop="period1_value" :width="150" />
|
||||
</template>
|
||||
<el-table-column label="合计" prop="total" width="100" fixed="right" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted } from 'vue';
|
||||
import CustomTable from '@/components/tableCom/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const compactForm = ref<HTMLElement | null>(null);
|
||||
const heightForm = ref(90);
|
||||
const dialogVisible = ref(false)
|
||||
const openDB = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
||||
const handleRowClick = (row: any) => {
|
||||
}
|
||||
const periods = [
|
||||
{
|
||||
key: 'period1',
|
||||
label: '2024-01-01~2024-01-07',
|
||||
|
||||
},
|
||||
{
|
||||
key: 'period2',
|
||||
label: '2024-01-08~2024-01-14',
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
const compareTableData = [
|
||||
{
|
||||
itemName: '血糖',
|
||||
itemCode: 'GLU',
|
||||
period1_value: 5.6,
|
||||
period1_status: '正常',
|
||||
period2_value: 6.2,
|
||||
period2_status: '偏高'
|
||||
},
|
||||
{
|
||||
itemName: '血脂',
|
||||
itemCode: 'CHOL',
|
||||
period1_value: 4.8,
|
||||
period1_status: '正常',
|
||||
period2_value: 5.1,
|
||||
period2_status: '正常'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
// 提交表单数据
|
||||
const queryParams = reactive({
|
||||
failed1: [],
|
||||
failed2: '',
|
||||
failed3: '',
|
||||
failed4: '',
|
||||
failed5: '',
|
||||
failed6: '',
|
||||
failed7: '',
|
||||
failed8: '',
|
||||
});
|
||||
const showSearch = ref(true);
|
||||
const queryRef = ref()
|
||||
// 定义校验规则
|
||||
const queryRules = ref({
|
||||
// clientId: [
|
||||
// { required: true, message: '编号不能为空', trigger: 'blur' },
|
||||
|
||||
// ],
|
||||
|
||||
// failed3: [
|
||||
// { required: true, message: '条码状态不能为空', trigger: 'change' },
|
||||
// ],
|
||||
})
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2',
|
||||
},
|
||||
|
||||
]
|
||||
const handleQuery = async () => {
|
||||
const valid = await queryRef.value.validate().catch(() => { });
|
||||
if (!valid) return false;
|
||||
}
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryRef.value?.resetFields();
|
||||
}
|
||||
|
||||
const loading = false;
|
||||
|
||||
// 数据源
|
||||
const tableData = [
|
||||
{
|
||||
id: 1, tfailed1: '打印', tfailed2: '急诊', tfailed3: '危急诊', tfailed4: '检验日期', tfailed5: '病人代号', tfailed6: '床号', tfailed7: '仪器', tfailed8: '样本号',
|
||||
tfailed9: '样本类型', tfailed10: '检查项目', tfailed11: '检查结果', tfailed12: '检查结果', tfailed13: '检查结果', tfailed14: '检查结果'
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: '打印', tfailed2: '急诊', tfailed3: '危急诊', tfailed4: '检验日期', tfailed5: '病人代号', tfailed6: '床号', tfailed7: '仪器', tfailed8: '样本号',
|
||||
tfailed9: '样本类型', tfailed10: '检查项目', tfailed11: '检查结果', tfailed12: '检查结果', tfailed13: '检查结果', tfailed14: '检查结果'
|
||||
},
|
||||
|
||||
]
|
||||
// 配置项
|
||||
const columns = ref([
|
||||
{ prop: 'tfailed1', label: '打印', visible: true, key: 0, sortable: true, width: '110px' },
|
||||
{ prop: 'tfailed2', label: '急诊', visible: true, key: 1, width: '110px' },
|
||||
{ prop: 'tfailed3', label: '危急诊', align: 'center', visible: true, key: 2, },
|
||||
{ prop: 'tfailed4', label: '检验日期', align: 'center', visible: true, key: 3, width: '110px' },
|
||||
{ prop: 'tfailed5', label: '病人代号', align: 'center', visible: true, key: 4, width: '110px' },
|
||||
{ prop: 'tfailed6', label: '床号', align: 'center', visible: true, key: 5, width: '110px' },
|
||||
{ prop: 'tfailed7', label: '仪器', align: 'center', visible: true, key: 6, width: '110px' },
|
||||
{ prop: 'tfailed8', label: '样本号', align: 'center', visible: true, key: 7, width: '110px' },
|
||||
{ prop: 'tfailed9', label: '样本类型', align: 'center', visible: true, key: 8, width: '110px' },
|
||||
{ prop: 'tfailed10', label: '检验目的', align: 'center', visible: true, key: 9, width: '110px' },
|
||||
{ prop: 'tfailed11', label: '病人类型', align: 'center', visible: true, key: 10, width: '110px' },
|
||||
{ prop: 'tfailed12', label: '性别', align: 'center', visible: true, key: 11, width: '110px' },
|
||||
{ prop: 'tfailed13', label: '仪器名称', align: 'center', visible: true, key: 12, width: '110px' },
|
||||
{ prop: 'tfailed14', label: '医疗机构', align: 'center', visible: true, key: 13, width: '110px' },
|
||||
])
|
||||
|
||||
|
||||
|
||||
// 表格配置
|
||||
const tableConfig = ref(
|
||||
{
|
||||
// stripe: true, // 斑马纹
|
||||
// border: true, // 边框
|
||||
selection: true, // 多选框
|
||||
index: false, // 序号
|
||||
height: '100%', // 高度
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
fit: true
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
interface ColumnItem {
|
||||
prop: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
key: number;
|
||||
align: string;
|
||||
slot: string;
|
||||
width: string;
|
||||
}
|
||||
// 更新列
|
||||
const updateColumns = (arr: Array<ColumnItem>) => {
|
||||
columns.value = arr
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 右侧数据源
|
||||
const rightTableData = [
|
||||
{
|
||||
id: 1, tfailed1: 'P001', tfailed2: '项目A', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
{
|
||||
id: 2, tfailed1: 'P002', tfailed2: '项目B', tfailed3: 100, tfailed4: 2, tfailed5: '待处理', tfailed6: '是',
|
||||
},
|
||||
]
|
||||
// 配置项
|
||||
const rightColumns = ref([
|
||||
{ prop: 'tfailed1', label: '项目代号', visible: true, key: 0, sortable: true, width: '110px' },
|
||||
{ prop: 'tfailed2', label: '项目名称', visible: true, key: 1 },
|
||||
{ prop: 'tfailed3', label: '单价', align: 'center', visible: true, key: 2 },
|
||||
{ prop: 'tfailed4', label: '数量', align: 'center', visible: true, key: 3 },
|
||||
{ prop: 'tfailed5', label: '状态', align: 'center', visible: true, key: 4 },
|
||||
{ prop: 'tfailed6', label: '计价标志', align: 'center', visible: true, key: 5 },
|
||||
|
||||
])
|
||||
// 表格配置
|
||||
const rightTableConfig = ref(
|
||||
{
|
||||
// stripe: true, // 斑马纹
|
||||
// border: true, // 边框
|
||||
selection: false, // 多选框
|
||||
index: false, // 序号
|
||||
height: '28vh', // 高度
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
fit: true
|
||||
}
|
||||
)
|
||||
|
||||
// 表格配置
|
||||
const bottomTableConfig = ref(
|
||||
{
|
||||
// stripe: true, // 斑马纹
|
||||
// border: true, // 边框
|
||||
selection: false, // 多选框
|
||||
index: false, // 序号
|
||||
height: '28vh', // 高度
|
||||
highlightCurrentRow: true, // 高亮当前行
|
||||
fit: true,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
adjustTableHeight();
|
||||
});
|
||||
|
||||
// 计算table高度
|
||||
watch(showSearch, () => {
|
||||
nextTick(() => {
|
||||
adjustTableHeight();
|
||||
})
|
||||
}, { immediate: true });
|
||||
|
||||
function adjustTableHeight() {
|
||||
if (compactForm.value) {
|
||||
// 获取高度
|
||||
heightForm.value = compactForm.value.offsetHeight;
|
||||
tableConfig.value.height = `calc(80vh - ${heightForm.value}px)`;
|
||||
rightTableConfig.value.height = `calc(38vh - ${heightForm.value}px)`;
|
||||
bottomTableConfig.value.height = `calc(35vh - ${heightForm.value} }px)`;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.right-table {
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import {queryComDictListService,addComDictService,updateComDictService} from "../../../api/liswork/dict/ComDict.js";
|
||||
import { queryComDictListService, addComDictService, updateComDictService } from "../../../api/liswork/dict/ComDict.js";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
@ -51,7 +51,7 @@ const upload = reactive({
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/comdict/importData"
|
||||
});
|
||||
|
||||
function resetData(zdlb){
|
||||
function resetData(zdlb) {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 15,
|
||||
@ -62,7 +62,7 @@ function resetData(zdlb){
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeList(){
|
||||
function getTypeList() {
|
||||
loading.value = true;
|
||||
queryParams.value.pageSize = 1000;
|
||||
queryParams.value.zdlb = '00'
|
||||
@ -74,7 +74,7 @@ function getTypeList(){
|
||||
});
|
||||
}
|
||||
|
||||
function refreshDetail(zdlb){
|
||||
function refreshDetail(zdlb) {
|
||||
queryParams.value.zdlb = zdlb;
|
||||
getList()
|
||||
resetData(zdlb)
|
||||
@ -93,7 +93,7 @@ function getList() {
|
||||
}
|
||||
|
||||
//查询
|
||||
function handleQuery(){
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
@ -109,7 +109,7 @@ function reset() {
|
||||
proxy.resetForm("dictRef");
|
||||
}
|
||||
//重置
|
||||
function resetQuery(){
|
||||
function resetQuery() {
|
||||
queryParams.value = {
|
||||
zdmc: '',
|
||||
zddh: ''
|
||||
@ -119,8 +119,8 @@ function resetQuery(){
|
||||
}
|
||||
|
||||
//新增
|
||||
function handleAdd(){
|
||||
if(queryParams.value.zdlb === undefined || queryParams.value.zdlb === ''){
|
||||
function handleAdd() {
|
||||
if (queryParams.value.zdlb === undefined || queryParams.value.zdlb === '') {
|
||||
proxy.$modal.msgWarning("请先选择字典大类");
|
||||
return;
|
||||
}
|
||||
@ -130,12 +130,12 @@ function handleAdd(){
|
||||
}
|
||||
|
||||
//修改
|
||||
function handleUpdate(){
|
||||
function handleUpdate() {
|
||||
|
||||
}
|
||||
|
||||
//删除
|
||||
function handleDelete(){
|
||||
function handleDelete() {
|
||||
|
||||
}
|
||||
/** 导入按钮操作 */
|
||||
@ -147,7 +147,7 @@ function handleImport() {
|
||||
function handleExport() {
|
||||
proxy.download("comdict/export", {
|
||||
...queryParams.value,
|
||||
},`user_${new Date().getTime()}.xlsx`);
|
||||
}, `user_${new Date().getTime()}.xlsx`);
|
||||
};
|
||||
/** 下载模板操作 */
|
||||
function importTemplate() {
|
||||
@ -173,12 +173,12 @@ const handleFileSuccess = (response, file, fileList) => {
|
||||
|
||||
|
||||
//多选框选中数据
|
||||
function handleSelectionChange(){
|
||||
function handleSelectionChange() {
|
||||
|
||||
}
|
||||
|
||||
//查询字典大类
|
||||
function handleQueryDetail(){
|
||||
function handleQueryDetail() {
|
||||
queryParams.value.zdmc = zdlbmc.value
|
||||
getTypeList()
|
||||
resetData()
|
||||
@ -216,67 +216,42 @@ function cancel() {
|
||||
}
|
||||
|
||||
|
||||
//提交表单数据
|
||||
function submitForm() {
|
||||
proxy.$refs["dictRef"].validate(valid => {
|
||||
if (valid) {
|
||||
if (form.value.zdlb != undefined && form.value.zdlb != '') {
|
||||
updateComDictService(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
}).catch(error => {
|
||||
reset();
|
||||
});
|
||||
} else {
|
||||
form.value.zdlb = queryParams.value.zdlb;
|
||||
addComDictService(form.value).then(response => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
}).catch(error => {
|
||||
form.value.zdlb = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
|
||||
getTypeList()
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input v-model="zdlbmc" clearable placeholder="请输入字典名称" prefix-icon="Search" style="margin-bottom: 20px" @keyup.enter="handleQueryDetail" @clear="handleQueryDetail" />
|
||||
<el-input v-model="zdlbmc" clearable placeholder="请输入字典名称" prefix-icon="Search" style="margin-bottom: 20px"
|
||||
@keyup.enter="handleQueryDetail" @clear="handleQueryDetail" />
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<div class="card-content">
|
||||
<p class="clickable" v-for="item in typeList" :key="item.zdlb" @click="refreshDetail(item.zddh)">{{ item.zdmc }}</p>
|
||||
<p class="clickable" v-for="item in typeList" :key="item.zdlb" @click="refreshDetail(item.zddh)">{{
|
||||
item.zdmc }}</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="clickable" v-for="item in typeList" :key="item.zdlb" @click="refreshDetail(item.zddh)">{{ item.zdmc }}</p>
|
||||
<p class="clickable" v-for="item in typeList" :key="item.zdlb" @click="refreshDetail(item.zddh)">{{
|
||||
item.zdmc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 字典明细-->
|
||||
<!-- 字典明细-->
|
||||
<el-col :span="20" :xs="24">
|
||||
<!-- 表单区域-->
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
|
||||
<el-form-item class="cus-el-form-item" label="名称" prop="dictName">
|
||||
<el-input v-model="queryParams.zdmc" placeholder="请输入名称" clearable style="width: 240px" @keyup.enter="handleQuery"/>
|
||||
<el-input v-model="queryParams.zdmc" placeholder="请输入名称" clearable style="width: 240px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item class="cus-el-form-item" label="明细代号" prop="status">
|
||||
<el-input v-model="queryParams.zddh" placeholder="请输入明细代号" clearable style="width: 240px" @keyup.enter="handleQuery"/>
|
||||
<el-input v-model="queryParams.zddh" placeholder="请输入明细代号" clearable style="width: 240px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -286,37 +261,45 @@ getTypeList()
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd"
|
||||
v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:dict:import']">导入</el-button>
|
||||
<el-button type="info" plain icon="Upload" @click="handleImport"
|
||||
v-hasPermi="['system:dict:import']">导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
||||
v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 表格区域-->
|
||||
<el-table v-loading="loading" :data="typeDetail" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label='字典类型' align="center" prop="zdlb" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label='字典类型' align="center" prop="zdlb" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="明细代号" align="center" prop="zddh" />
|
||||
<el-table-column label="名称" align="center" prop="zdmc" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="名称" align="center" prop="zdmc" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template #default="{row}">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(row)" v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(row)"
|
||||
v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(row)"
|
||||
v-hasPermi="['system:dict:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList"/>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -346,18 +329,9 @@ getTypeList()
|
||||
</el-dialog>
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
@ -366,7 +340,8 @@ getTypeList()
|
||||
<el-checkbox v-model="upload.updateSupport" />是否覆盖已经存在的字典数据
|
||||
</div>
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
|
||||
@click="importTemplate">下载模板</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
@ -377,24 +352,27 @@ getTypeList()
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card-content {
|
||||
.card-content {
|
||||
max-height: 450px;
|
||||
/* 设置最大高度 */
|
||||
overflow-y: auto;
|
||||
/* 超出高度时显示垂直滚动条 */
|
||||
padding: 16px;
|
||||
/* 保持与卡片默认一致的内边距 */
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.card-content {
|
||||
max-height: 450px; /* 设置最大高度 */
|
||||
overflow-y: auto; /* 超出高度时显示垂直滚动条 */
|
||||
padding: 16px; /* 保持与卡片默认一致的内边距 */
|
||||
}
|
||||
.clickable:hover {
|
||||
cursor: pointer; /* 鼠标悬停时显示手型 */
|
||||
transition: all 0.3s; /* 平滑过渡效果 */
|
||||
.clickable:hover {
|
||||
cursor: pointer;
|
||||
/* 鼠标悬停时显示手型 */
|
||||
transition: all 0.3s;
|
||||
/* 平滑过渡效果 */
|
||||
color: blue;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
37
tsconfig.json
Normal file
37
tsconfig.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext" /* 指定ECMAScript目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
|
||||
"module": "esnext" /* 指定模块代码生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* 指定要包含在编译中的库文件。 */,
|
||||
"jsx": "preserve" /* 指定JSX代码生成：'preserve'、'react-native'或'react'。 */,
|
||||
"isolatedModules": true /* 将每个文件作为单独的模块进行转译（类似于“ts.transpileModule”）。 */,
|
||||
|
||||
/* 严格的类型检查选项 */
|
||||
"strict": true /* 启用所有严格的类型检查选项。 */,
|
||||
|
||||
/* 模块解析选项 */
|
||||
"moduleResolution": "node" /* 指定模块解析策略：'node'（Node.js）或'classic'（TypeScript 1.6之前版本）。*/,
|
||||
"baseUrl": "." /* 用于解析非绝对模块名称的基准目录。 */,
|
||||
"paths": {
|
||||
"/@/*": ["src/*"]
|
||||
} /* 一系列条目，这些条目将导入重新映射到相对于“baseUrl”的查找位置。*/,
|
||||
"types": ["vite/client"] /* 要包含在编译中的类型声明文件。 */,
|
||||
"allowSyntheticDefaultImports": true /*允许从没有默认导出的模块进行默认导入。这不会影响代码生成，只会影响类型检查。*/,
|
||||
"esModuleInterop": true /* 通过为所有导入创建命名空间对象，实现CommonJS和ES模块之间的发射互操作性。这意味着“允许合成默认导入”。 */,
|
||||
"experimentalDecorators": true /*启用对ES7装饰器的实验性支持。 */,
|
||||
|
||||
/* 高级选项 */
|
||||
"skipLibCheck": true /* 跳过声明文件的类型检查. */,
|
||||
"forceConsistentCasingInFileNames": true /*禁止对同一文件使用大小写不一致的引用。 */
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
// 关键配置：关闭模板中的严格类型检查
|
||||
"strictTemplates": false,
|
||||
// // 可选：如果需要更精细的控制，可以单独关闭某些检查
|
||||
// "templateOptions": {
|
||||
// "allowUnknownInTemplate": true // 允许模板中使用未知属性
|
||||
// }
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts", "auto-imports.d.ts"], // **表示任意目录，而 * 表示任意文件。这表明 src 目录中的所有文件都将被编译
|
||||
"exclude": ["node_modules", "dist"] ,// 指示不需要编译的文件目录
|
||||
}
|
||||
@ -1,11 +1,19 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import {
|
||||
defineConfig,
|
||||
loadEnv
|
||||
} from 'vite'
|
||||
import path from 'path'
|
||||
import createVitePlugins from './vite/plugins'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
export default defineConfig(({
|
||||
mode,
|
||||
command
|
||||
}) => {
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
const { VITE_APP_ENV } = env
|
||||
const {
|
||||
VITE_APP_ENV
|
||||
} = env
|
||||
return {
|
||||
// 部署生产环境和开发环境下的URL。
|
||||
// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
|
||||
@ -31,8 +39,8 @@ export default defineConfig(({ mode, command }) => {
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
target: 'http://localhost:9801',
|
||||
// target: 'https://api.wzs.pub/mock/13',
|
||||
target: 'http://47.97.125.165:8904',
|
||||
// target: 'http://192.168.1.114:9801',
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
},
|
||||
@ -47,8 +55,7 @@ export default defineConfig(({ mode, command }) => {
|
||||
//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
{
|
||||
plugins: [{
|
||||
postcssPlugin: 'internal:charset-removal',
|
||||
AtRule: {
|
||||
charset: (atRule) => {
|
||||
@ -57,8 +64,7 @@ export default defineConfig(({ mode, command }) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user