feat: 增加详情

src/views/backOfficeSystem/fourColorManage/warningControl/warningBk/index.vue

@@ -14,10 +14,16 @@
     <!-- 表格 -->
     <div class="tabBox">
       <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
+        :expand="true">
         <template #yjJb="{ row }">
           <DictTag :value="row.yjJb" :tag="false" :color="bqYs(row.yjJb)" :options="D_BZ_YJJB" />
         </template>
+        <template #expand="{ props }">
+          <div class="expand-content" style="max-width: 100%">
+            <Items :row="props || {}" :dict="dict" />
+          </div>
+        </template>
       </MyTable>
       <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
         ...pageData.pageConfiger,
@@ -32,13 +38,18 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import MyTable from "@/components/aboutTable/MyTable.vue";
 import Pages from "@/components/aboutTable/Pages.vue";
+import Items from "./item/items.vue";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 import { bqYs } from '@/utils/tools'
 
 const { proxy } = getCurrentInstance();
-const { D_BZ_YJJB, D_GS_ZDQT_YJLB, D_BZ_YJLX } = proxy.$dict("D_BZ_YJJB", "D_GS_ZDQT_YJLB", "D_BZ_YJLX"); //获取字典数据
+const { D_BZ_YJJB, D_GS_ZDQT_YJLB, D_BZ_YJLX, D_GS_SSYJ, D_GSXT_YJXX_CZZT } = proxy.$dict("D_BZ_YJJB", "D_GS_ZDQT_YJLB", "D_BZ_YJLX", "D_GS_SSYJ", "D_GSXT_YJXX_CZZT"); //获取字典数据
 
+// 字典数据集合
+const dict = ref({
+  D_BZ_YJJB
+})
 
 const searchBox = ref();
 

src/views/backOfficeSystem/fourColorManage/warningControl/warningBk/item/items.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="warning-item">
+    <div class="second-row">
+      <div class="info-item">预警标题：<span>{{ row.yjBt }}</span></div>
+      <div class="info-item">姓名：<span>{{ row.yjRyxm }}</span></div>
+      <div class="info-item">身份证号：<span>{{ row.yjRysfzh }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item">电话：<span>{{ row.yjRysjh }}</span></div>
+      <div class="info-item">预警内容：<span>{{ row.yjNr }}</span></div>
+      <div class="info-item">预警日期：<span>{{ row.yjFsrq }}</span></div>
+    </div>
+    <div class="second-row">
+      <div class="info-item">预警时间：<span>{{ row.yjFssj }}</span></div>
+      <div class="info-item">预警标签详情：<span>{{ row.yjbqmc }}</span></div>
+      <div class="info-item">
+        预警级别：
+        <DictTag :value="row.yjJb" :tag="false" :color="bqYs(row.yjJb)" :options="Array.isArray(props.dict.D_BZ_YJJB) ? props.dict.D_BZ_YJJB : []" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { bqYs } from '@/utils/tools'
+
+const props = defineProps({
+  /** 表格行数据 */
+  row: {
+    type: Object,
+    default: () => ({})
+  },
+  dict: {
+    type: Object,
+    default: () => ({
+      D_BZ_YJJB: []
+    })
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.warning-item {
+  width: 100%;
+  padding: 15px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.second-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.info-item {
+  flex: 0 0 calc(33.33% - 20px);
+  box-sizing: border-box;
+  display: flex;
+  padding: 5px 0;
+  color: #333;
+
+  span {
+    font-weight: 500;
+    color: #606266;
+  }
+}
+</style>