更新数据

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

@@ -0,0 +1,19 @@
+<template>
+  <el-dialog v-model="modelValue" :destroy-on-close="true" title="报告模板+'人员'" @close="close" :close-on-click-modal="false">
+    <div>4444</div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+const props = defineProps({
+    modelValue:{
+        type:Boolean,
+        default:true
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -62,9 +62,12 @@
       </div>
     </div>
   </div>
+  <!-- 详情 -->
+  <Detail></Detail>
 </template>
 
 <script setup>
+import Detail from './components/detail.vue'
 import { qcckPost, qcckGet } from "@/api/qcckApi.js";
 import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
 import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";

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

@@ -15,73 +15,40 @@
         <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
       </div>
       <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{height:listHeight+'px'}" v-loading="loading">
-        <li class="cntItem" v-for="(it,idx) in list" :key="idx">
+        <li class="cntItem" @click="lookDeatl(it)" v-for="(it,idx) in list" :key="idx">
           <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
           <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
+          <div class="flex ww100 f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
           <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
           <div class="foot">
             <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
             <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
           </div>
         </li>
-        <li class="cntItem" v-for="(it,idx) in list" :key="idx">
+        <div class="ww100 flex just-center">
-          <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
+          <MOSTY.Empty :show="!loading && list.length <= 0"></MOSTY.Empty>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
+        </div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
+        <div class="tc ww100 mb4" style="color: #a29f9f;" v-if="total == list.length && total>0">暂时没有数据了！</div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
-          <div class="foot">
-            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
-            <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
-          </div>
-        </li>
-        <li class="cntItem" v-for="(it,idx) in list" :key="idx">
-          <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
-          <div class="foot">
-            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
-            <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
-          </div>
-        </li>
-        <li class="cntItem" v-for="(it,idx) in list" :key="idx">
-          <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
-          <div class="foot">
-            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
-            <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
-          </div>
-        </li>
-        <li class="cntItem" v-for="(it,idx) in list" :key="idx">
-          <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
-          <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
-          <div class="foot">
-            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
-            <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
-          </div>
-        </li>
-        <MOSTY.Empty :show="!loading && list.length <= 0"></MOSTY.Empty>
       </ul>
     </div>
   </div>
+  <!-- 详情 -->
+  <Detail ref="detailForm"></Detail>
 </template>
 
 <script setup>
+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";
-import { qcckGet, qcckDelete } from "@/api/qcckApi.js";
+import { qcckPost } from "@/api/qcckApi.js";
-import { reactive, ref, onMounted, getCurrentInstance,watch } from "vue";
+import { reactive, ref, onMounted, getCurrentInstance,watch, nextTick } from "vue";
 const { proxy } = getCurrentInstance();
 const {  D_SG_SJLY,D_SG_TSYPGZ} = proxy.$dict("D_SG_SJLY","D_SG_TSYPGZ"); //获取字典数据
 const searchBox = ref(); //搜索框
 const refBtn = ref(); 
 const show = ref(false)
+const detailForm = ref()
 const listHeight = ref()
 const searchConfiger = ref([
   { label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
@@ -114,10 +81,6 @@ onMounted(()=>{
 })
 
 
-const load = () =>{
-  console.log('加载');
-}
-
 // 数据类型
 const changeData_sjly = (val) =>{
   checkData.sjlxBtn.hasChoose = val;
@@ -125,7 +88,9 @@ const changeData_sjly = (val) =>{
   D_SG_SJLY.value.forEach(item => {
     if(val.includes(item.zdmc)) dms.push(item.dm);
   });
-  formData.value.sjLx = dms.join(',')
+  formData.value.sjLx = dms;
+  page.value = 1;
+  getLits();
 }
 
 // 研判类型
@@ -135,7 +100,21 @@ const changeData_yplx = (val) =>{
   D_SG_TSYPGZ.value.forEach(item => {
     if(val.includes(item.zdmc)) dms.push(item.dm);
   });
-  formData.value.ypLx = dms.join(',')
+  formData.value.ypLx = dms;
+  page.value = 1;
+  getLits();
+}
+
+const onSearch = (val) =>{
+  formData.value = {...formData.value,...val,};
+  page.value = 1;
+  getLits();
+}
+
+const load = () =>{
+  if(total.value == list.value.length) return;
+  page.value++;
+  getLits();
 }
 
 const getLits = () =>{
@@ -145,7 +124,7 @@ const getLits = () =>{
     ...formData.value
   }
   loading.value = true;
-  qcckGet(params,'/mosty-gsxt/tsyp/selectPage').then(res=>{
+  qcckPost(params,'/mosty-gsxt/tsyp/selectPage').then(res=>{
     let arr = res.records || [];
     list.value = page.value == 1 ? arr : list.value.concat(arr);
     total.value = res.total;
@@ -155,6 +134,13 @@ const getLits = () =>{
   })
 }
 
+// 查看详情
+const lookDeatl = (val) =>{
+  nextTick(()=>{
+    detailForm.value.init(val,formData.value.sjLx)
+  })
+}
+
 // 表格高度计算
 const tabHeightFn = () => {
   listHeight.value = window.innerHeight - searchBox.value.offsetHeight - refBtn.value.offsetHeight - 182;