|
|
@@ -0,0 +1,165 @@
|
|
|
+<template>
|
|
|
+ <div class="risk_location_container">
|
|
|
+ <div class="dialog_container_header">
|
|
|
+ <div class="dialog_container_header_title">
|
|
|
+ <img :src="getImgSrc(dialogOptions.imgName)" alt="icon" />
|
|
|
+ <div>{{ dialogOptions.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog_container_header_btn">
|
|
|
+ <div class="btn_box">
|
|
|
+ <div class="img_close" @click="handleClose">
|
|
|
+ <img src="../../../../../assets/img/弹窗关闭.png" alt="close" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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}`"
|
|
|
+ :type="column.type"
|
|
|
+ :prop="column.prop"
|
|
|
+ :label="column.label"
|
|
|
+ :width="column.width"
|
|
|
+ :align="column.align || 'center'"
|
|
|
+ :formatter="column.formatter"
|
|
|
+ >
|
|
|
+ <!-- 支持自定义列模板 -->
|
|
|
+ <template v-if="column.slot" #default="scope">
|
|
|
+ <slot :name="column.slot" :row="scope.row">
|
|
|
+ <el-button color="#3599ff" :dark="true" plain>查看</el-button>
|
|
|
+ <el-button color="#a83126" :dark="true" plain>删除</el-button>
|
|
|
+ </slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
|
|
|
+const dialogOptions = ref({
|
|
|
+ imgName: '小标题',
|
|
|
+ title: '风险场所列表',
|
|
|
+ activeIndex: 0,
|
|
|
+ buttons: [],
|
|
|
+ tableColumns: [
|
|
|
+ // { type: 'index', label: '序号', width: '80' },
|
|
|
+ { prop: 'type', label: '风险ID' },
|
|
|
+ { prop: 'date', label: '风险名称' },
|
|
|
+ { prop: 'domeType', label: '管控ID' },
|
|
|
+ { prop: 'samplingNum', label: '管控名称' },
|
|
|
+ {
|
|
|
+ prop: 'actions',
|
|
|
+ label: '操作',
|
|
|
+ slot: 'action-column', // 使用插槽自定义
|
|
|
+ width: '160'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 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: '-' }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 图片路径处理方法
|
|
|
+const getImgSrc = picName => {
|
|
|
+ return new URL(`../../../../../assets/img/${picName}.png`, import.meta.url).href
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.risk_location_container {
|
|
|
+ position: absolute;
|
|
|
+ right: -600px;
|
|
|
+ top: 20px;
|
|
|
+ width: 582px;
|
|
|
+ height: 768px;
|
|
|
+ background: url(../../../../../assets/img/弹框-大.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_container_header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_container_header_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24px;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ background: linear-gradient(to bottom, #ffffff 0%, #a4e9ff 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+
|
|
|
+ > img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_container_header_btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_table {
|
|
|
+ width: 100%;
|
|
|
+ height: 670px;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+: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: 0;
|
|
|
+ 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;
|
|
|
+ // border-bottom: 1px solid rgba(41, 44, 45, 0.3) !important;
|
|
|
+}
|
|
|
+</style>
|
