|
|
@@ -14,18 +14,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-select v-model="time" placeholder="日期(轮次)" popper-class="dialog_custom-select">
|
|
|
- <el-option v-for="item in dialogStore.timeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
+ <el-input v-model="time" placeholder="请输入要查询的内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="tab_box">
|
|
|
+ <div v-for="(item, index) in dialogOptions.buttons" :key="item.id" class="right_btn" :class="{ right_btn_active: btnActiveIndex === index }" @click="handleButtonClick(index)">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <el-table
|
|
|
- :data="dialogOptions.tableData"
|
|
|
- class="dialog_table"
|
|
|
- @row-click="handleRowClick"
|
|
|
- :header-cell-style="{ backgroundColor: 'transparent', color: '#ffffff' }"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- >
|
|
|
+ <el-table :data="dialogOptions.tableData" class="dialog_table" @row-click="handleRowClick" :row-class-name="tableRowClassName">
|
|
|
<el-table-column
|
|
|
v-for="(column, colIndex) in dialogOptions.tableColumns"
|
|
|
:key="`col_${colIndex}_${column.prop}`"
|
|
|
@@ -37,15 +34,17 @@
|
|
|
:formatter="column.formatter"
|
|
|
>
|
|
|
<!-- 支持自定义列模板 -->
|
|
|
- <template v-if="column.slot" #default="scope">
|
|
|
+ <!-- <template v-if="column.slot" #default="scope">
|
|
|
<slot :name="column.slot" :row="scope.row"></slot>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <CaseDetailDiaog v-if="dialogStore.caseDetailDiaogOpen"></CaseDetailDiaog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import CaseDetailDiaog from './CaseDetailDiaog'
|
|
|
import { ref, watch } from 'vue'
|
|
|
import { useDialogStore } from '@/store/dialog'
|
|
|
let dialogStore = useDialogStore()
|
|
|
@@ -87,38 +86,47 @@ const emit = defineEmits(['close', 'button-click', 'row-click'])
|
|
|
|
|
|
const dialogOptions = ref({
|
|
|
imgName: '小标题',
|
|
|
- title: '检测结果',
|
|
|
+ title: '病例列表',
|
|
|
activeIndex: 0,
|
|
|
- buttons: [],
|
|
|
+ buttons: [
|
|
|
+ { id: 0, title: '病例', active: true },
|
|
|
+ { id: 1, title: '密接', active: false },
|
|
|
+ { id: 2, title: '次密接', active: false }
|
|
|
+ ],
|
|
|
tableColumns: [
|
|
|
{ type: 'index', label: '序号', width: '80' },
|
|
|
- { prop: 'type', label: '样本分类' },
|
|
|
- { prop: 'date', label: '日期/轮次' },
|
|
|
- { prop: 'domeType', label: '样本类型' },
|
|
|
- { prop: 'samplingNum', label: '采样数' },
|
|
|
- { prop: 'testNum', label: '检测数' },
|
|
|
- { prop: 'positiveNum', label: '阳性数' }
|
|
|
+ { prop: 'code', label: '病例编号' },
|
|
|
+ { prop: 'name', label: '姓名' }
|
|
|
],
|
|
|
tableData: [
|
|
|
// 数据...
|
|
|
- { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '病例', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '密接', date: '-', domeType: '血清', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
- { type: '咽拭子', date: '-', domeType: '-', samplingNum: '-', testNum: '-', positiveNum: '-' },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ { code: '18-2024-1207-01-猴痘', name: '张嘉佳' },
|
|
|
+ { code: '05-2024-1207-01-猴痘', name: '孙忆枫' },
|
|
|
+ { code: '31-2024-1207-01-疟疾', name: '杨静云' },
|
|
|
+ { code: '31-2024-1207-01-疟疾', name: '王乐康' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '李怡悦' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '庞慧' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '李书易' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '胡小小' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '周乐心' },
|
|
|
+ { code: '01-2024-1207-01-猩红热', name: '杨松生' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '顾伦' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '王漫' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '尹丽娜' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '池子仪' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '李赫' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '傅彭薄' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '裴谊育' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '鲍业宝' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '黄隆心' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '侯彩蕊' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻04-2024-1207-01-聚集性呕吐腹泻', name: '冯立俏' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '宫臻' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '毛妹莲' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '孔崧谊' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '宁淑曼' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '明忱冶' },
|
|
|
+ { code: '04-2024-1207-01-聚集性呕吐腹泻', name: '叶洵歆' }
|
|
|
]
|
|
|
})
|
|
|
|
|
|
@@ -132,29 +140,53 @@ const getImgSrc = picName => {
|
|
|
// 关闭弹窗
|
|
|
const handleClose = () => {
|
|
|
// emit('close')
|
|
|
- dialogStore.setCaseManageNodeDialogOpen(false)
|
|
|
+ dialogStore.setCaseManageNodeDialogOpen(false)
|
|
|
}
|
|
|
|
|
|
// 表格行点击
|
|
|
const handleRowClick = row => {
|
|
|
- emit('row-click', row)
|
|
|
+ // emit('row-click', row)
|
|
|
+ dialogStore.setCaseDetailDiaogOpen(true)
|
|
|
+}
|
|
|
+
|
|
|
+// 按钮点击处理
|
|
|
+const handleButtonClick = index => {
|
|
|
+ btnActiveIndex.value = index
|
|
|
+ // emit('button-click', {
|
|
|
+ // index,
|
|
|
+ // button: props.options.buttons[index]
|
|
|
+ // })
|
|
|
}
|
|
|
|
|
|
const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
- return rowIndex % 2 === 0 ? 'single-row' : 'double-row'
|
|
|
+ console.log(rowIndex, 'rowIndex')
|
|
|
+ // if (rowIndex===0) {
|
|
|
+ // return 'g_single-row'
|
|
|
+ // }
|
|
|
+ // if (rowIndex!==0&&rowIndex % 2 === 0) {
|
|
|
+ // return 'single-row'
|
|
|
+ // } else if (rowIndex!==0 && rowIndex % 2 !== 0) {
|
|
|
+ // return 'double-row'
|
|
|
+ // }
|
|
|
+ // return rowIndex % 2 === 0 ? 'single-row' : 'double-row'
|
|
|
+
|
|
|
+ if (rowIndex === 0) {
|
|
|
+ return 'single-row'
|
|
|
+ }
|
|
|
+ return rowIndex % 2 === 0 ? 'double-row' : ''
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.dialog_container {
|
|
|
position: absolute;
|
|
|
- right: -580px;
|
|
|
- top: 0px;
|
|
|
- width: 582px;
|
|
|
+ right: -410px;
|
|
|
+ top: 10px;
|
|
|
+ width: 396px;
|
|
|
height: 768px;
|
|
|
- background: url(../../../../../assets/img/弹框-大.png) no-repeat;
|
|
|
+ background: url(../../../../../assets/img/弹框-小.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- padding: 40px 50px;
|
|
|
+ padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
// background-color: #fff;
|
|
|
}
|
|
|
@@ -187,48 +219,47 @@ const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.dialog_container_header_btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.btn_box {
|
|
|
+.tab_box {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
- // justify-content: end;
|
|
|
align-items: center;
|
|
|
- // margin-right: 30px;
|
|
|
- // margin-top: 6px;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 60px;
|
|
|
+ padding: 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.right_btn {
|
|
|
- padding: 0 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- height: 24px;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- border: 1px solid rgba(111, 229, 255, 0.3);
|
|
|
- font-family: Alibaba PuHuiTi 3;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
|
- text-align: center;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // padding: 0 10px;
|
|
|
+ font-family: Alimama ShuHeiTi;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #8dbfee;
|
|
|
+ font-style: italic;
|
|
|
+ background: linear-gradient(0deg, rgba(239, 251, 255, 0.34) 0%, rgba(0, 0, 0, 0.34) 11.9140625%, rgba(255, 254, 254, 0.34) 100%);
|
|
|
+ opacity: 0.85;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ // margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.right_btn_active {
|
|
|
- background: linear-gradient(90deg, #59a7da 0%, rgba(22, 116, 178, 0) 100%);
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- border: 1px solid #6fe5ff;
|
|
|
- font-family: Alibaba PuHuiTi 3;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 14px;
|
|
|
- color: #08ffe5;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: url(../../../../../assets/img/tab选中.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // border-radius: 4px 4px 4px 4px;
|
|
|
+ // border: 1px solid #6fe5ff;
|
|
|
+ font-family: Alimama ShuHeiTi;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #daedff;
|
|
|
+ font-style: italic;
|
|
|
}
|
|
|
|
|
|
.img_close {
|
|
|
@@ -240,12 +271,53 @@ const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
.dialog_table {
|
|
|
width: 100%;
|
|
|
height: 580px;
|
|
|
- margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
-// 表格行间距
|
|
|
-// :deep(.el-table__body) {
|
|
|
-// -webkit-border-vertical-spacing: 6px;
|
|
|
+:deep(.el-table) {
|
|
|
+ thead {
|
|
|
+ tr {
|
|
|
+ background-color: transparent !important;
|
|
|
+ background: none !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+ }
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 3px;
|
|
|
+ background: url('../../../../../assets/img/title-bottom-line.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.el-table__header-wrapper th) {
|
|
|
+ background-color: transparent !important;
|
|
|
+ background: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+// :deep(.el-table) {
|
|
|
+// tbody {
|
|
|
+// tr:first-child {
|
|
|
+// position: relative;
|
|
|
+
|
|
|
+// &::before {
|
|
|
+// content: '';
|
|
|
+// position: absolute;
|
|
|
+// top: -1px; // 防止边框产生空隙
|
|
|
+// left: 0;
|
|
|
+// width: 100%;
|
|
|
+// height: 4px; // 根据图片高度调整
|
|
|
+// background: url('../../../../../assets/img/title-bottom-line.png') no-repeat center;
|
|
|
+// background-size: 100% 100%;
|
|
|
+// z-index: 1;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
// }
|
|
|
|
|
|
:deep(.el-table__inner-wrapper:before) {
|
|
|
@@ -322,4 +394,21 @@ const tableRowClassName = ({ row, rowIndex }) => {
|
|
|
--el-border-color-hover: rgba(10, 192, 246, 1);
|
|
|
--el-border-color: rgba(111, 229, 255, 0.3);
|
|
|
}
|
|
|
+
|
|
|
+/* 单行背景色 */
|
|
|
+.dialog_table .single-row {
|
|
|
+ // top: 0px;
|
|
|
+ // background-color: rgba(27, 130, 183, 0.22) !important;
|
|
|
+ background: url(../../../../../assets/img/浅色-长.png) no-repeat;
|
|
|
+ // background: url(../../../../../assets/img/title-bottom-line.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ // position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/* 双行背景色 */
|
|
|
+.dialog_table .double-row {
|
|
|
+ // background-color: rgba(27, 130, 183, 0.12) !important;
|
|
|
+ background: url(../../../../../assets/img/深色-长.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
</style>
|
