更新数据

src/views/backOfficeSystem/JudgmentHome/tsypHome/components/detail.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="dialog" v-if="showDialog">
+    <div class="head_box">
+      <span class="title">查看详情 </span>
+      <div>
+        <el-button size="small" @click="close">关闭</el-button>
+      </div>
+    </div>
+    <div class="listBox">
+        <div ref="searchBox">
+            <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
+        </div>
+        <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable
+        :tableData="pageData.tableData"
+        :tableColumn="pageData.tableColumn"
+        :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount"
+        :tableConfiger="pageData.tableConfiger"
+        :controlsWidth="pageData.controlsWidth"
+      >
+        <template #zdrRyjb="{ row }">
+          <DictTag :value="row.zdrRyjb" :tag="false" :options="D_GS_ZDR_RYJB" />
+        </template>
+        <template #zdrYjdj="{ row }">
+          <DictTag :value="row.zdrYjdj" :tag="false" :options="D_GS_ZDR_YJDJ" />
+        </template>
+      </MyTable>
+      <Pages
+        @changeNo="changeNo"
+        @changeSize="changeSize"
+        :tableHeight="pageData.tableHeight"
+        :pageConfiger="{
+          ...pageData.pageConfiger,
+          total: pageData.total
+        }"
+      ></Pages>
+    </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import { qcckPost } from "@/api/qcckApi.js";
+import {ref,reactive, nextTick,getCurrentInstance} from 'vue';
+const { proxy } = getCurrentInstance();
+const {  D_GS_ZDR_RYJB,D_GS_ZDR_YJDJ} = proxy.$dict("D_GS_ZDR_RYJB","D_GS_ZDR_YJDJ"); //获取字典数据
+const showDialog = ref(false)
+const searchBox = ref(); //搜索框
+const searchConfiger = ref(
+  [
+  { label: "姓名", prop: 'ryXm', placeholder: "请输入姓名", showType: "input"},
+  { label: "身份证号", prop: 'rySfzh', placeholder: "请输入身份证号", showType: "input"},
+]);
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: false
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "姓名", prop: "ryXm" },
+    { label: "身份证号", prop: "rySfzh" },
+    { label: "联系电话", prop: "ryLxdh" },
+    { label: "重点人员级别", prop: "zdrRyjb",showSolt:true },
+    { label: "预警等级", prop: "zdrYjdj",showSolt:true },
+    { label: "关联民警", prop: "gkMjXm" },
+    { label: "民警警号", prop: "gkMjJh" },
+  ]
+});
+const item = ref({})
+const sjlx = ref([])
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 280;
+  window.onresize = function () {
+    tabHeightFn();
+  };
+};
+
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList();
+};
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList();
+};
+
+const getList = () =>{
+    let params = {
+        id:item.value.id,
+        sjLx:sjlx.value,
+        pageCurrent:pageData.pageConfiger.pageCurrent,
+        pageSize:pageData.pageConfiger.pageSize,
+    }
+    pageData.tableConfiger.loading = true;
+    qcckPost(params,'/mosty-gsxt/tsyp/getRyPage').then(res=>{
+        pageData.tableConfiger.loading = false;
+        console.log(res,'===');
+        pageData.tableData = res.records || []
+        pageData.total = res.total;
+    }).catch(()=>{
+        pageData.tableConfiger.loading = false;
+    })
+}
+
+const close = () =>{
+    pageData.tableData = [];
+    showDialog.value = false;
+}
+
+const init = (val,lxs) =>{
+    showDialog.value = true;
+    item.value = val;
+    sjlx.value = lxs;
+    getList()
+    nextTick(()=>{
+      tabHeightFn()
+    })
+}
+
+
+defineExpose({init})
+</script>
+
+<style lang="scss" scoped>
+.listBox{
+    height: calc(100% - 50px);
+    ::v-deep .searchBox{
+        margin-bottom: 0 !important;
+    }
+}
+
+</style>

src/views/backOfficeSystem/JudgmentHome/tsypHome/index.vue

@@ -31,12 +31,15 @@
         <div class="tc ww100 mb4" style="color: #a29f9f;" v-if="total == list.length && total>0">暂时没有数据了！</div>
       </ul>
     </div>
-    <YpModel v-model="showModel" :textContent="textContent" ></YpModel>
   </div>
+  <!-- 详情 -->
+  <Detail ref="detailForm"></Detail>
+  <YpModel v-model="showModel" :textContent="textContent" ></YpModel>
 </template>
 
 <script setup>
 import YpModel from '@/components/ypModel/index.vue'
+import Detail from './components/detail.vue'
 import * as MOSTY from "@/components/MyComponents/index";
 import CheckBox from "@/components/checkBox/index.vue";
 import Search from "@/components/aboutTable/Search.vue";
@@ -49,6 +52,7 @@ const showModel = ref(false);
 const textContent = ref('');
 const refBtn = ref(); 
 const show = ref(false)
+const detailForm = ref()
 const listHeight = ref()
 const searchConfiger = ref([
   { label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
@@ -135,12 +139,6 @@ const getLits = () =>{
 }
 
 const handleYp = (val) =>{
-  console.log(val,'=====');
-  
-}
-
-// 查看详情
-const lookDeatl = (val) =>{
   let params = { tsypid:val.id, }
   qcckPost(params,'/mosty-gsxt/wshs/getDcypbg').then(res=>{
     let data = res || {};
@@ -152,6 +150,14 @@ const lookDeatl = (val) =>{
     textContent.value = html;
     showModel.value = true;
   })
+  
+}
+
+// 查看详情
+const lookDeatl = (val) =>{
+  nextTick(()=>{
+    detailForm.value.init(val,formData.value.sjLx)
+  })
 }
 
 // 表格高度计算