更新页面

This commit is contained in:
2025-05-21 10:24:02 +08:00
parent f155ad7066
commit 2b3f8a4ce8
6 changed files with 546 additions and 20 deletions

View File

@ -0,0 +1,239 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="重点群体管理">
<el-button type="primary" size="small" v-for="it in btns" :key="it"> {{ it }}</el-button>
<el-button type="primary" size="small" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="danger" size="small" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><Dete /></el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search
:searchArr="searchConfiger"
@submit="onSearch"
:key="pageData.keyCount"
/>
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #jbxx>
<div>
<img src="" alt="">
<ul>
<li>群体名称</li>
<li>所属辖区</li>
<li>群体级别</li>
<li>风险等级</li>
</ul>
</div>
<div class="flex">
<el-button type="primary" size="small"> 涉恐群体</el-button>
<el-button type="primary" size="small"> 涉稳群体</el-button>
<el-button type="primary" size="small"> 讨薪群体</el-button>
</div>
</template>
<template #bgxx="{row}">
<div>背景资料</div>
<div>创建单位</div>
<div>风险监测</div>
<div>一般监测</div>
<div>重点监测</div>
</template>
<template #gkxx="{row}">
<div>群体标签</div>
<div>管辖单位</div>
<div>列控原因</div>
<div>开始时间</div>
<div>截至时间</div>
</template>
<template #wkrs="{row}">
<span style="color:#0072ff">{{ row.wkrs }}</span>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
<el-link size="small" type="primary">查看</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
<!-- 详情 -->
<DetailForm ref="detailDiloag" />
</div>
</template>
<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import DetailForm from "./components/addForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const detailDiloag = ref();
const searchBox = ref(); //搜索框
const btns = reactive(['一键布控','维护群体','矛盾化解','转指令','转线索','转督导','转合成','移交管控','批量导入','导出'])
const searchConfiger = ref([
{
label: "群体名称",
prop: "groupName",
placeholder: "请输入群体名称",
showType: "input"
},
{
label: "群体风险等级",
prop: "riskLevel",
placeholder: "请选择群体风险等级",
showType: "select"
},
{
label: "监测级别",
prop: "monitorLevel",
placeholder: "请选择监测级别",
showType: "select"
},
{
label: "成员姓名",
prop: "memberName",
placeholder: "请输入成员姓名",
showType: "input"
},
{
label: "时间敏感词",
prop: "timeSensitive",
placeholder: "请输入时间敏感词",
showType: "input"
},
{
label: "群体类别",
prop: "groupType",
placeholder: "请选择群体类别",
showType: "select"
},
{
label: "布控状态",
prop: "bkzt",
placeholder: "请选择布控状态",
showType: "select"
},
]);
const pageData = reactive({
tableData: [
{
img:'',
jbxx: "",
wkrs:'1/5'
},
],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
},
controlsWidth: 220,
tableColumn: [
{ label: "群体基本信息", prop: "jbxx",showSolt: true },
{ label: "背景信息", prop: "bgxx",showSolt: true },
{ label: "管控信息", prop: "gkxx" ,showSolt: true },
{ label: "稳控人数", prop: "wkrs" ,showSolt: true,width:80 },
{ label: "状态", prop: "status" }
]
});
const queryFrom = ref({});
onMounted(() => {
getList();
tabHeightFn();
});
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList();
};
// 搜索
const onSearch = (val) => {
queryFrom.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
};
const changeNo = (val) => {
pageData.pageConfiger.pageNum = val;
getList();
};
const changeSize = (val) => {
pageData.pageConfiger.pageSize = val;
getList();
};
// 获取列表
const getList = (val) => {
// pageData.tableConfiger.loading = true;
let data = { ...pageData.pageConfiger, ...queryFrom.value };
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
// qcckPost(data,url).then(res=>{
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
};
// 详情
const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
};
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight =
window.innerHeight - searchBox.value.offsetHeight - 250;
window.onresize = function () {
tabHeightFn();
};
};
</script>
<style>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
</style>