更新页面

This commit is contained in:
2025-07-08 20:10:24 +08:00
parent 28d7d0e8f0
commit f6390c9002
33 changed files with 1277 additions and 5106 deletions

View File

@ -65,10 +65,7 @@
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/index.vue";
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/dialogList.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { fa } from "element-plus/es/locale.mjs";
import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();

View File

@ -1,221 +0,0 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">{{ title }}</span>
<div>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-tabs v-model="activeName">
<el-tab-pane label="场所信息" name="basic">
<el-form :model="listQuery" :label-width="230" label-position="left">
<div class="flex align-center">
<div style="width: calc(100% - 176px);">
<div class="form-row">
<el-form-item label="统一社会信用代码">
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
</el-form-item>
<el-form-item label="单位名称(营业执照登记名称)">
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="场所名称">
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所联系电话">
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="经营状况">
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所面积">
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="开业日期">
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
</el-form-item>
</div>
</div>
<img height="130" src="@/assets/images/person.png" alt="">
</div>
<el-form-item label="单位注册地址">
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所地址">
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
</el-form-item>
<div class="flex align-center">
<div style="width: calc(100% - 176px);">
<div class="form-row">
<el-form-item label="法定代表人">
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
</el-form-item>
<el-form-item label="法定代表人证件号码">
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="法定代表人联系电话">
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
</el-form-item>
<el-form-item label="法定代表人居住地址">
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="场所负责人">
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所负责人身份证号">
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="场所负责人联系方式">
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所负责人居住地址">
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
</el-form-item>
</div>
</div>
<div>
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
</div>
</div>
<div class="upload-group">
<el-form-item label="营业执照照片">
<img height="130" src="@/assets/images/person.png" alt="">
<img height="130" src="@/assets/images/person.png" alt="">
<img height="130" src="@/assets/images/person.png" alt="">
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="机修场所备案编号">
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
</el-form-item>
<el-form-item label="场所备案机构名称">
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="备案登记日期">
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
</el-form-item>
<el-form-item label="所属辖区">
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="责任民警">
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
</el-form-item>
<el-form-item label="警号">
<el-input v-model="listQuery.jh" placeholder="请输入"/>
</el-form-item>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="从业人员" name="staff">
<!-- 从业人员表格 -->
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';
const dialogForm = ref(false);
const activeName = ref('basic');
const title = ref('开锁业场所管理详情');
const listQuery = ref({});
const areaOptions = ref([]); // 区域选项数据
// 初始化数据
const init = (type, row,) => {
dialogForm.value = true;
// 根据type和row初始化表单数据
};
const close = () => {
dialogForm.value = false;
};
defineExpose({init})
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
:deep(.el-form-item__label) {
background-color: #F7FAFB;
padding: 0px 8px;
color: #000;
font-weight: 500;
border: 1px solid #E3E7ED;
}
.head_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cntinfo{
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
.form-row {
display: flex;
.el-form-item {
flex: 1;
}
}
.upload-group {
display: flex;
// gap: 20px;
.el-form-item {
flex: 1;
}
}
.unit {
margin-left: 5px;
}
::v-deep .el-input__inner{
height: 36px !important;
line-height: 36px !important;
border-radius: 0;
color: #777575;
}
}
.el-form-item--default{
margin-bottom: 0px;
}
</style>

View File

@ -1,28 +1,11 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="布控审批" />
</div>
<!-- 搜索 -->
<div ref="searchBox">
<!-- 顶部主导航 -->
<div class="main-nav">
<el-button
:class="['nav-btn', activeMainNav === 'todo' ? 'active' : '']"
@click="activeMainNav = 'todo'"
>
我的待办
</el-button>
<el-button
:class="['nav-btn', activeMainNav === 'done' ? 'active' : '']"
@click="activeMainNav = 'done'"
>
我的已办
</el-button>
</div>
<!-- 子导航 -->
<div class="sub-nav">
<PageTitle title="布控审批" >
<template #left>
<el-button :type="activeMainNav == 'todo' ? 'primary':''" @click="activeMainNav = 'todo'">我的待办</el-button>
<el-button :type="activeMainNav == 'done' ? 'primary':''" @click="activeMainNav = 'done'">我的已办</el-button>
</template>
<el-tabs v-model="activeSubNav" @click="handleType">
<el-tab-pane label="我的发起" name="myInitiate"></el-tab-pane>
<el-tab-pane label="我的审核" name="myAudit"></el-tab-pane>
@ -30,20 +13,12 @@
<el-tab-pane label="我的签收" name="mySign"></el-tab-pane>
<el-tab-pane label="我的处置" name="myHandle"></el-tab-pane>
</el-tabs>
</div>
<Search
:searchArr="searchConfiger"
@submit="onSearch"
:key="pageData.keyCount"
>
<template #defaultSlot>
<div>
<el-input-number v-model="queryFrom.xqy"></el-input-number>
<span class="ml10 mr10" style="color: #000"></span>
<el-input-number v-model="queryFrom.dqy"></el-input-number>
</div>
</template>
</Search>
</PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
</div>
<!-- 表格 -->
<div class="tabBox">
@ -52,17 +27,7 @@
<el-button>批量处理</el-button>
<el-button>导出</el-button>
</div>
<el-input
v-model="input2"
style="max-width: 300px"
placeholder="请输入关键字"
>
<template #append
><el-button type="primary" icon="Search"></el-button
></template>
</el-input>
</div>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
@ -84,35 +49,12 @@
<template #czYq="{ row }">
<DictTag :tag="false" :value="row.czYq" :options="D_GS_BK_CZYQ" />
</template>
<template #czJsdwdm="{ row }">
<div>
{{
deptList.find((item) => item.id == row.czJsdwdm)?.label ||
"未知单位"
}}
</div>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-button
size="small"
@click="autoEdit('auto', row)"
v-if="row.bkZt === '02' && activeSubNav === 'myAudit'"
>审核</el-button
>
<el-button
size="small"
@click="autoEdit('approval', row)"
v-if="row.bkZt === '04'&& activeSubNav === 'myApprove'"
>审批</el-button
>
<el-button size="small" @click="autoEdit('detail', row)"
>详情</el-button
>
<!-- <el-button size="small">从业人员</el-button>
<el-button size="small">转区域</el-button> -->
<el-button size="small" @click="autoEdit('auto', row)" >审核</el-button>
<el-button size="small" @click="autoEdit('approval', row)">审批</el-button>
<el-button size="small" @click="autoEdit('detail', row)">详情</el-button>
</template>
</MyTable>
<Pages
@ -125,8 +67,6 @@
}"
></Pages>
</div>
<!-- 详情 -->
<MyControlInfo ref="myControlInfoRef" />
</div>
</template>
@ -135,35 +75,13 @@ 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/detailForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { setItem, getItem, removeAllItem } from "@/utils/storage";
import { selectUserDeptPage } from "@/api/user-manage";
import MyControlInfo from "../MyControlInfo/components/sendControl.vue";
const { proxy } = getCurrentInstance();
const {
D_GS_BK_DJ,
D_GS_BK_DX,
D_GS_BK_ZT,
D_GS_BK_SJLX,
D_GS_BK_CZYQ,
D_GS_BK_CZJSDWLX
} = proxy.$dict(
"D_GS_BK_DJ",
"D_GS_BK_DX",
"D_GS_BK_ZT",
"D_GS_BK_SJLX",
"D_GS_BK_CZYQ",
"D_GS_BK_CZJSDWLX"
); //获取字典数据
const deptList = ref([]); //部门列表
const detailDiloag = ref();
const { D_GS_BK_DJ, D_GS_BK_DX, D_GS_BK_ZT, D_GS_BK_SJLX, D_GS_BK_CZYQ } = proxy.$dict( "D_GS_BK_DJ", "D_GS_BK_DX", "D_GS_BK_ZT", "D_GS_BK_SJLX", "D_GS_BK_CZYQ" ); //获取字典数据
const searchBox = ref(); //搜索框
const btns = ref();
const userId = getItem("USERID");
const myControlInfoRef = ref(null);
// 主导航激活状态
const activeMainNav = ref("todo");
@ -211,34 +129,10 @@ const searchConfiger = ref([
placeholder: "最近预警时间",
showType: "date"
},
{
label: "布控对象信息",
prop: "jyzt",
placeholder: "请选择布控对象信息",
showType: "select",
options: [{ label: "在业", value: "在业" }]
},
{
label: "处理接受部门",
prop: "jyzt",
placeholder: "请选择经营状况",
showType: "select",
options: [{ label: "在业", value: "在业" }]
}
]);
const queryFrom = ref({});
const userInfo = ref({});
const pageData = reactive({
tableData: [
{
name: "1",
ssxq: "1",
cyxm: "1",
qqksrxm: "1",
qqksrsfzh: "1",
jzrxm: "1"
}
], //表格数据
tableData: [], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
@ -255,16 +149,10 @@ const pageData = reactive({
tableColumn: [
{ label: "布控级别", prop: "bkDj", showSolt: true },
{ label: "布控标题", prop: "bkBt" },
// { label: "布控对象", prop: "bkDx", showSolt: true },
// { label: "布控对象信息", prop: "bkDxxx" },
// { label: "预警标签模型", prop: "yjbqmx" },
// { label: "布控范围", prop: "bkfw" },
// { label: "预警信息", prop: "yjxx" },
{ label: "处置接收单位", prop: "czJsdwdm", showSolt: true },
{ label: "处置接收单位", prop: "czJsdwdm"},
{ label: "处置要求", prop: "czYq", showSolt: true },
{ label: "开始时间", prop: "bkSjKs" },
{ label: "结束时间", prop: "bkSjJs" },
// { label: "最近预警时间", prop: "zjyjsj" },
{ label: "失效时间", prop: "bkSjSx" },
{ label: "布控发起人", prop: "bkfqrXm" },
{ label: "布控状态", prop: "bkZt", showSolt: true }
@ -272,39 +160,12 @@ const pageData = reactive({
});
onMounted(() => {
tabHeightFn();
getUserInfo();
getdepartmentList();
});
// 详情
const info = (type, row) => {
myControlInfoRef.value.init(type, row);
};
// 获取部门列表
const getdepartmentList = () => {
selectUserDeptPage().then((res) => {
deptList.value = res?.records.map((item) => ({
label: item.deptName,
value: item.deptId
}));
});
};
const getUserInfo = async () => {
console.log(userId, "userId");
await qcckGet({}, `/mosty-base/sysUser/getUserInfo/${userId}`).then((res) => {
console.log(res, "res");
userInfo.value = res;
setItem("userInfo", res);
getList();
});
};
//选择类型
const handleType = (val) => {
const handleType = () => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList();
};
// 搜索
@ -324,41 +185,28 @@ const changeSize = (val) => {
};
// 获取列表
const getList = (val) => {
pageData.tableConfiger.loading = true;
let data = {
...pageData.pageConfiger,
...queryFrom.value,
[activeSubNav.value === "myAudit" ? "bkshrSfzh" : "bksprSfzh"]:
userInfo.value.idEntityCard
};
let url = "/mosty-gsxt/tbGsxtBk/selectPage";
qcckGet(data, url)
.then((res) => {
pageData.tableData = res.records || [];
pageData.total = res.total;
pageData.tableConfiger.loading = false;
})
.catch(() => {
pageData.tableConfiger.loading = false;
});
const getList = () => {
// pageData.tableConfiger.loading = true;
// let data = {
// ...pageData.pageConfiger,
// ...queryFrom.value,
// };
// qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(() => {
// pageData.tableConfiger.loading = false;
// });
};
// 详情
const autoEdit = (type, row) => {
myControlInfoRef.value.init(type, row);
};
// 表格高度计算
const tabHeightFn = () => {
console.log("btns.value.offsetHeight", btns.value.offsetHeight);
pageData.tableHeight =
window.innerHeight -
searchBox.value.offsetHeight -
btns.value.offsetHeight -
30 -
250;
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 300;
window.onresize = function () {
tabHeightFn();
};
@ -371,15 +219,6 @@ const tabHeightFn = () => {
background-color: #fff;
}
.nav-btn {
margin-right: 10px;
border: none;
background: none;
&.active {
background-color: #409eff;
color: #fff;
}
}
.sub-nav {
background-color: #fff;
@ -392,6 +231,7 @@ const tabHeightFn = () => {
:deep(.el-tabs__nav-wrap::after) {
height: 1px;
background: none;
}
:deep(.el-table--fit) {
@ -402,4 +242,5 @@ const tabHeightFn = () => {
padding: 10px;
box-sizing: border-box;
}
</style>

View File

@ -0,0 +1,102 @@
<template>
<el-dialog :title="title" width="800px" :model-value="modelShow" append-to-body @close="closed" :close-on-click-modal="false">
<el-form :model="listQuery" inline :rules="rules" ref="formRef" :label-width="130" >
<el-form-item label="区域名称" prop="qymc">
<MOSTY.Other width="100%" clearable v-model="listQuery.qymc" placeholder="请输入区域名称"/>
</el-form-item>
<el-form-item label="区域类型" prop="qylx">
<MOSTY.Select v-model="listQuery.qylx" filterable :dictEnum="props.dic.D_ZDY_QYLX" width="100%" clearable placeholder="请选择区域类型"/>
</el-form-item>
<el-form-item label="区域级别" prop="qyjb">
<MOSTY.Select v-model="listQuery.qyjb" filterable :dictEnum="props.dic.D_ZDY_QYJB" width="100%" clearable placeholder="请选择区域类型"/>
</el-form-item>
<el-form-item label="行政区划" prop="xzqh" v-if="listQuery.qylx">
<MOSTY.Select v-model="listQuery.qyjb" filterable :dictEnum="props.dic.D_BZ_XZQHDM" width="100%" clearable placeholder="请选择行政区划"/>
</el-form-item>
<el-form-item label="感知源信息" prop="fwmc" class="ww100">
<div class="flex ww100">
<el-input v-model="listQuery.fwmc" placeholder="请输入感知元信息" style="flex: 1;"></el-input>
<el-button type="primary" style="width: 136px;" class="ml10">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">选择感知源</span>
</el-button>
</div>
</el-form-item>
<el-form-item label="地图范围" prop="dtfw" class="ww100">
<div class="flex ww100">
<el-input v-model="listQuery.fwmc" placeholder="请输入地图范围" style="flex: 1;"></el-input>
<el-button type="primary" style="width: 136px;" class="ml10">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">选择地图范围</span>
</el-button>
</div>
</el-form-item>
<div class="mapbox" v-if="showMap"><GdMap></GdMap></div>
<div class="mt10 flex just-center">
<el-button @click="closed"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</div>
</el-form>
</el-dialog>
</template>
<script setup>
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, watch, nextTick } from "vue";
const props = defineProps({
dic: {
type: Object,
default: () => ({})
},
});
const modelShow = ref(false);
const emit = defineEmits(["change"]);
const title = ref("新增区域");
const listQuery = ref({});
const formRef = ref();
const showMap = ref(false);
const rules = {
qymc: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
qylx: [{ required: true, message: "请选择区域类型", trigger: "change" }],
qyjb: [{ required: true, message: "请选择区域级别", trigger: "change" }],
xzqh: [{ required: true, message: "请选择行政区划", trigger: "change" }],
fwmc: [{ required: true, message: "请输入感知元信息", trigger: "blur" }],
dtfw: [{ required: true, message: "请输入地图范围", trigger: "blur" }]
};
const init = (type,val) => {
title.value = type === "add" ? "新增区域" : "编辑区域";
modelShow.value = true;
nextTick(() => {
showMap.value = true;
});
};
const closed = () => {
modelShow.value = false;
formRef.value.resetFields();
showMap.value = false;
};
const submit = () => {
formRef.value.validate(valid => {
if(!valid) return false;
console.log("提交的数据:", listQuery.value);
closed();
});
};
defineExpose({
init
});
</script>
<style scoped lang="scss">
.mapbox{
position: relative;
margin-left: 40px;
width: calc(100% - 40px);
height: 320px;
background: red;
}
</style>

View File

@ -0,0 +1,222 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="我的布控" />
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" />
</div>
<!-- 按钮组 -->
<div class="content">
<div class="btns">
<el-button type="primary" @click="handleRow('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="danger" @click="handleRow('moreDelete', '')">批量删除</el-button>
</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 #qydj="{ row }">
<DictTag :tag="false" :value="row.qydj" :options="D_ZDY_QYJB" />
</template>
<template #fwlx="{ row }">
<DictTag :tag="false" :value="row.fwlx" :options="D_ZDY_QYLX" />
</template>
<template #sfqy="{ row }">
<el-switch
v-model="row.sfqy"
inline-prompt
active-value="1"
inactive-value="0"
active-text=""
inactive-text=""
/>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="primary" @click="handleRow('edit', row)">编辑</el-link>
<el-link size="small" type="danger" @click="handleRow('delete', row)">删除</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
</div>
</div>
<!-- 新增区域 -->
<AddForm ref="addVisible" :dic="{D_BZ_SF, D_ZDY_QYJB, D_ZDY_QYLX,D_BZ_XZQHDM }"></AddForm>
</template>
<script setup>
import AddForm from "./components/addForm.vue";
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 { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_ZDY_QYJB, D_ZDY_QYLX,D_BZ_XZQHDM } = proxy.$dict("D_BZ_SF","D_ZDY_QYJB","D_ZDY_QYLX","D_BZ_XZQHDM"); //获取字典数据
const searchBox = ref(); //搜索框
const addVisible = ref(); //新增区域组件
const searchConfiger = ref([
{
label: "区域等级",
prop: "qydj",
placeholder: "请选择区域等级",
showType: "select",
options: D_ZDY_QYJB
},
{
label: "范围名称",
prop: "fwmc",
placeholder: "请输入范围名称",
showType: "input"
},
{
label: "范围类型",
prop: "fwlx",
placeholder: "请选择范围类型",
showType: "select",
options: D_ZDY_QYLX
},
{
label: "是否启用",
prop: "sfqy",
placeholder: "请选择是否启用",
showType: "select",
options: D_BZ_SF
}
]);
const queryFrom = ref({});
const pageData = reactive({
tableData: [
{
qydj: "一级",
fwmc: "测试范围1",
fwlx: "区域",
gzyxx: "感知源信息1",
glrysl: 10,
glqtsl: 5,
sfqy: "1"
},
{
qydj: "二级",
fwmc: "测试范围2",
fwlx: "区域",
gzyxx: "感知源信息2",
glrysl: 20,
glqtsl: 15,
sfqy: "0"
}
], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 120, //操作栏宽度
tableColumn: [
{ label: "区域等级", prop: "qydj", showSolt: true },
{ label: "范围名称", prop: "fwmc" },
{ label: "范围类型", prop: "fwlx", showSolt: true },
{ label: "感知源信息", prop: "gzyxx" },
{ label: "关联人员数量", prop: "glrysl" },
{ label: "关联群体数量", prop: "glqtsl" },
{ label: "是否启用", prop: "sfqy", showSolt: true }
]
});
onMounted(() => {
getList();
tabHeightFn();
});
// 搜索
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 = () => {
// pageData.tableConfiger.loading = true;
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
// qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(() => {
// pageData.tableConfiger.loading = false;
// });
};
const handleRow = (type, row) => {
switch (type) {
case "add"://新增
case "edit": //编辑
addVisible.value.init(type, row);
break;
case "delete"://删除
case "moreDelete": //批量删除
break;
default:
break;
}
};
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 292;
window.onresize = function () {
tabHeightFn();
};
};
</script>
<style lang="scss" scoped>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
.content {
background-color: #fff;
border-radius: 4px;
padding-top: 10px;
.btns {
padding: 0 10px;
}
}
</style>

View File

@ -0,0 +1,246 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="我的审核" >
<template #left>
<el-button :type="activeMainNav == 'todo' ? 'primary':''" @click="activeMainNav = 'todo'">我的待办</el-button>
<el-button :type="activeMainNav == 'done' ? 'primary':''" @click="activeMainNav = 'done'">我的已办</el-button>
</template>
<el-tabs v-model="activeSubNav" @click="handleType">
<el-tab-pane label="我的发起" name="myInitiate"></el-tab-pane>
<el-tab-pane label="我的审核" name="myAudit"></el-tab-pane>
<el-tab-pane label="我的审批" name="myApprove"></el-tab-pane>
<el-tab-pane label="我的签收" name="mySign"></el-tab-pane>
<el-tab-pane label="我的处置" name="myHandle"></el-tab-pane>
</el-tabs>
</PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
</div>
<!-- 表格 -->
<div class="tabBox">
<div ref="btns" class="btns flexcb">
<div class="">
<el-button>批量处理</el-button>
<el-button>导出</el-button>
</div>
</div>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #bkDj="{ row }">
<DictTag :tag="false" :value="row.bkDj" :options="D_GS_BK_DJ" />
</template>
<template #bkDx="{ row }">
<DictTag :tag="false" :value="row.bkDx" :options="D_GS_BK_DX" />
</template>
<template #bkZt="{ row }">
<DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
</template>
<template #czYq="{ row }">
<DictTag :tag="false" :value="row.czYq" :options="D_GS_BK_CZYQ" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-button size="small" @click="autoEdit('auto', row)" >审核</el-button>
<el-button size="small" @click="autoEdit('approval', row)">审批</el-button>
<el-button size="small" @click="autoEdit('detail', row)">详情</el-button>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight + 42"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
</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 { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_BK_DJ, D_GS_BK_DX, D_GS_BK_ZT, D_GS_BK_SJLX, D_GS_BK_CZYQ } = proxy.$dict( "D_GS_BK_DJ", "D_GS_BK_DX", "D_GS_BK_ZT", "D_GS_BK_SJLX", "D_GS_BK_CZYQ" ); //获取字典数据
const searchBox = ref(); //搜索框
const btns = ref();
// 主导航激活状态
const activeMainNav = ref("todo");
// 子导航激活状态
const activeSubNav = ref("myAudit");
const searchConfiger = ref([
{
label: "布控等级",
prop: "bqDj",
placeholder: "请选择布控等级",
showType: "select",
options: D_GS_BK_DJ
},
{
label: "布控对象",
prop: "bkDx",
placeholder: "请选择布控对象",
showType: "select",
options: D_GS_BK_DX
},
{
label: "布控状态",
prop: "bkZt",
placeholder: "请选择布控状态",
showType: "select",
options: D_GS_BK_ZT
},
{
label: "布控时间类型",
prop: "bkSjLx",
placeholder: "请选择布控时间",
showType: "date",
options: D_GS_BK_SJLX
},
{
label: "预计标签模型",
prop: "jyzt",
placeholder: "请选预计标签模型",
showType: "select",
options: [{ label: "在业", value: "在业" }]
},
{
label: "最近预警时间",
prop: "checkDate",
placeholder: "最近预警时间",
showType: "date"
},
]);
const queryFrom = ref({});
const pageData = reactive({
tableData: [], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: "240", //操作栏宽度
tableColumn: [
{ label: "布控级别", prop: "bkDj", showSolt: true },
{ label: "布控标题", prop: "bkBt" },
{ label: "处置接收单位", prop: "czJsdwdm"},
{ label: "处置要求", prop: "czYq", showSolt: true },
{ label: "开始时间", prop: "bkSjKs" },
{ label: "结束时间", prop: "bkSjJs" },
{ label: "失效时间", prop: "bkSjSx" },
{ label: "布控发起人", prop: "bkfqrXm" },
{ label: "布控状态", prop: "bkZt", showSolt: true }
]
});
onMounted(() => {
tabHeightFn();
});
//选择类型
const handleType = () => {
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 = () => {
// pageData.tableConfiger.loading = true;
// let data = {
// ...pageData.pageConfiger,
// ...queryFrom.value,
// };
// qcckGet(data, "/mosty-gsxt/tbGsxtBk/selectPage").then((res) => {
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(() => {
// pageData.tableConfiger.loading = false;
// });
};
// 详情
const autoEdit = (type, row) => {
};
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 300;
window.onresize = function () {
tabHeightFn();
};
};
</script>
<style lang="scss" scoped>
.main-nav {
padding: 16px;
background-color: #fff;
}
.sub-nav {
background-color: #fff;
padding: 0 16px;
}
:deep(.el-tabs__header) {
margin-bottom: 0;
}
:deep(.el-tabs__nav-wrap::after) {
height: 1px;
background: none;
}
:deep(.el-table--fit) {
top: 52px !important;
}
.btns {
height: 52px;
padding: 10px;
box-sizing: border-box;
}
</style>

View File

@ -1,86 +0,0 @@
<template>
<el-dialog v-model="dialogTableVisible" title="添加范围模型" width="1000px" @close="close">
<div class="dialog-container">
<el-form :model="formData" label-width="auto" label-position="left">
<div class="form-row">
<el-form-item label="模型名称">
<el-input v-model="formData.modelName" placeholder="请输入模型名称" />
</el-form-item>
<el-form-item label="感知模型类型" prop="region">
<el-select v-model="formData.region" placeholder="重点区域类型">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="生成时间范围">
<el-date-picker
v-model="formData.dateRange"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
/>
</el-form-item>
</div>
<el-form-item label="感知源信息">
<el-input v-model="formData.perceptionDomain" placeholder="请输入模型名称">
<template #append>
<el-button type="primary">选择感知源</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="地图范围">
<el-input v-model="formData.mapRange" placeholder="请输入模型名称">
<template #append>
<el-button type="primary">选择地图范围</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
<div class="map"></div>
</div>
</el-dialog>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
modelName: "",
perceptionDomain: "",
mapRange: "",
dateRange: [],
region: ""
});
const dialogTableVisible = ref(false);
// 初始化数据
const init = (type, row) => {
dialogTableVisible.value = true;
};
const close = () => {};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog-container {
height: 550px;
.map {
height: 400px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-row {
display: flex;
gap: 5px;
.el-form-item {
flex: 1;
}
}
}
</style>

View File

@ -1,131 +0,0 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">开锁业务信息详情</span>
<div>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-form :model="listQuery" :label-width="230" label-position="left">
<div class="form-row">
<el-form-item label="业务流水号码">
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
</el-form-item>
<el-form-item label="开锁业务日期">
<el-input v-model="listQuery.ywrq" placeholder="2025/1/20 10:00:00"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="场所名称">
<el-input v-model="listQuery.csmc" placeholder="毛王开锁"/>
</el-form-item>
<el-form-item label="从业人员姓名">
<el-input v-model="listQuery.cyrxm" placeholder="张三"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="从业人员证件号码">
<el-input v-model="listQuery.cyrzjhm" placeholder="511123456789654125"/>
</el-form-item>
<el-form-item label="请求开锁人姓名">
<el-input v-model="listQuery.qqksrxm" placeholder="李四"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="请求开锁人证件号码">
<el-input v-model="listQuery.qqksrzjhm" placeholder="511111111111111111"/>
</el-form-item>
<el-form-item label="开锁业务地址">
<el-input v-model="listQuery.ywdz" placeholder="林芝市巴宜区xxxx路18号"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="开锁业务类型">
<el-input v-model="listQuery.ywlx" placeholder="开锁"/>
</el-form-item>
<el-form-item label="见证人姓名">
<el-input v-model="listQuery.jzrxm" placeholder="王五"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="见证人证件号">
<el-input v-model="listQuery.jzrzjh" placeholder="514154785965214741"/>
</el-form-item>
<el-form-item label="见证人联系方式">
<el-input v-model="listQuery.jzrlxfs" placeholder="15222222222"/>
</el-form-item>
</div>
</el-form>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const dialogForm = ref(false);
const listQuery = ref({});
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
// 根据type和row初始化表单数据
};
const close = () => {
dialogForm.value = false;
};
defineExpose({init})
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
:deep(.el-form-item__label) {
background-color: #F7FAFB;
padding: 0px 8px;
color: #000;
font-weight: 500;
border: 1px solid #E3E7ED;
}
.head_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cntinfo{
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
.form-row {
display: flex;
.el-form-item {
flex: 1;
}
}
::v-deep .el-input__inner{
height: 36px !important;
line-height: 36px !important;
border-radius: 0;
color: #777575;
}
}
.el-form-item--default{
margin-bottom: 0px;
}
</style>

View File

@ -1,229 +0,0 @@
<template>
<el-dialog
:title="titleValue"
width="900px"
:model-value="modelValue"
append-to-body
@close="closed"
>
<div>
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
<el-form-item label="标签名称">
<el-input
placeholder="请输入标签名称"
v-model="listQuery.bqMc"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div
class="tabBox"
:class="props.Single ? 'tabBoxRadio' : ''"
style="margin-top: 0px"
>
<el-table
v-loading="loading"
ref="multipleUserRef"
@selection-change="handleSelectionChange"
:data="tableData"
border
:row-key="keyid"
style="width: 100%"
height="450"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table-column prop="bqMc" align="center" label="标签名称" />
<el-table-column prop="bqDm" align="center" label="标签代码" />
<el-table-column prop="bqDj" align="center" label="标签等级">
</el-table-column>
<el-table-column prop="bqYs" align="center" label="标签颜色">
<template #default="{ row }">
<DictTag
:value="row.bqYs"
:tag="false"
:options="props.dic.D_GS_SSYJ"
/>
</template>
</el-table-column>
</el-table>
</div>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closed">取消</el-button>
<el-button type="primary" @click="onComfirm">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const props = defineProps({
modelValue: {
type: Boolean,
required: true
},
dic: {
type: Object,
default: () => {}
},
bqDl: {
type: String,
default: "01"
},
bqLx: {
type: String,
default: "01"
},
titleValue: {
type: String,
default: "选择大类"
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: true
},
roleIds: {
type: Array,
default: []
}
});
const total = ref(0);
const listQuery = ref({
current: 1,
size: 20
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
onMounted(() => {
handleFilter();
});
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { current: 1, size: 20 };
getDataList();
};
const keyid = (row) => {
return row.id;
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("chooseDate", list);
let data = { type: props.LeaderType, userList: userList };
emits("chooseDateLeader", data);
closed();
};
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.size = currentSize;
getDataList();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.current = currentPage;
getDataList();
};
// 查询标签组合列表
const getDataList = () => {
const data = listQuery.value;
loading.value = true;
qcckGet(data, "/mosty-gsxt/tbGsxtBqzh/selectPage").then((res) => {
tableData.value = res?.records;
total.value = Number(res.total);
loading.value = false;
multipleUser();
});
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.current = 1;
getDataList();
};
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
:deep(.el-dialog) {
background: #fff !important;
border-radius: 8px !important;
/* 其他样式 */
}
</style>

View File

@ -1,168 +0,0 @@
<template>
<div class="drawer-model">
<el-drawer v-model="drawer" title="范围模型(3)" direction="rtl" style="width: 300px">
<div class="project-list">
<!-- 搜索区域 -->
<div class="search-area">
<!-- 搜索区域 -->
<el-form :model="searchForm" label-width="auto" style="max-width: 600px">
<el-form-item label="模型名称">
<el-input v-model="searchForm.projectName" />
</el-form-item>
<el-form-item label="启用状态">
<el-select v-model="searchForm.status" placeholder="启用状态">
<el-option label="启用" value="shanghai" />
<el-option label="禁用" value="beijing" />
</el-select>
</el-form-item>
</el-form>
<div>
<el-button type="primary" icon="Search">查询</el-button>
<el-button type="primary" icon="CirclePlus" @click="areaModel">添加应用模型</el-button>
</div>
<!-- <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" /> -->
</div>
<!-- 列表区域 -->
<div class="list-area">
<div v-for="(item, index) in pageData.tableData" :key="index" class="list-item">
<div class="model-info">
<div class="model-name">巴宜区公路外国模型</div>
<div class="model-type">模型类型重点区域城规模型</div>
</div>
<el-divider border-style="dotted"></el-divider>
<div class="actions flexcb">
<el-checkbox v-model="item.checked" label="启用" />
<div class="btns">
<span class="set">设置</span>
<span class="delete">删除</span>
</div>
</div>
</div>
</div>
</div>
</el-drawer>
<!-- 添加范围模型 -->
<AreaModel ref="areaModelRef"></AreaModel>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import AreaModel from "./areaModel.vue";
const areaModelRef = ref();
const areaModel = () => {
areaModelRef.value.init();
};
const searchConfiger = ref([
{
label: "项目名称",
prop: "name",
placeholder: "请选择经营状况",
showType: "input"
},
{
label: "启用状态",
prop: "jyzt",
placeholder: "请选择经营状况",
showType: "select",
options: [{ label: "在业", value: "在业" }]
}
]);
// 搜索
const onSearch = val => {
searchForm.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
};
const searchForm = ref({
projectName: "",
status: ""
});
// 获取列表
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 pageData = reactive({
tableData: [
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false }
], //表格数据
keyCount: 0,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
} //分页
});
const drawer = ref(false);
// 初始化数据
const init = () => {
drawer.value = true;
// 根据type和row初始化表单数据
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.drawer-model {
header {
background: none;
}
:deep(.el-drawer) {
width: 400px !important;
}
}
.search-area {
margin-bottom: 20px;
}
.list-area {
display: flex;
flex-direction: column;
gap: 16px;
.model-name {
color: rgb(64, 158, 255);
font-size: 20px;
margin-bottom: 10px;
}
.model-type {
font-size: 18px;
color: #ccc;
}
}
.list-item {
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 16px;
.el-divider--horizontal {
margin: 10px 0;
}
}
.actions {
.btns {
.set {
color: rgb(64, 158, 255);
}
.delete {
margin-left: 10px;
color: rgb(245, 108, 108);
}
}
}
</style>

View File

@ -1,125 +0,0 @@
<template>
<el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
<div class="dialog-container">
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" class="seacrh" />
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
tableHeight="400px"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
const dialogTableVisible = ref(false);
const searchConfiger = ref([
{
label: "姓名",
prop: "name",
placeholder: "请输入场所名称",
showType: "input"
},
{
label: "身份证号",
prop: "idCard",
placeholder: "请输入从业人姓名",
showType: "input"
},
{
label: "车牌号",
prop: "plateNumber",
placeholder: "请输入场所名称",
showType: "input"
},
{
label: "车牌号",
prop: "plateNumber2",
placeholder: "请输入从业人姓名",
showType: "input"
}
]);
const pageData = reactive({
tableData: [
{
name: "1"
}
], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 120, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "photo", width: "80" },
{ label: "姓名", prop: "name", width: "100" },
{ label: "性别", prop: "gender", width: "80" },
{ label: "身份证号", prop: "idCard", width: "180" },
{ label: "户籍地", prop: "residence", width: "150" },
{ label: "现居住地", prop: "currentAddress", width: "150" },
{ label: "手机号", prop: "phone", width: "120" },
{ label: "虚拟身份", prop: "virtualId", width: "120" },
{ label: "车牌号", prop: "plateNumber", width: "120" },
{ label: "车牌号", prop: "plateNumber2", width: "120" },
{ label: "特征描述", prop: "features", width: "150" },
{ label: "人员标签", prop: "personTags", width: "150" }
]
});
// 初始化数据
const init = (type, row) => {
dialogTableVisible.value = true;
};
const close = () => {};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog-container {
// .box {
// flex-wrap: nowrap !important;
// }
.seacrh {
.box {
flex-wrap: nowrap !important;
}
}
}
</style>

View File

@ -1,194 +0,0 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">布控详情</span>
<div>
<el-button
size="small"
type="primary"
@click="autoClick"
v-if="typetext == 'auto'"
>审核</el-button
>
<el-button
size="small"
@click="autoClick"
type="primary"
v-if="typetext == 'approval'"
>审批</el-button
>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<div class="title-item">布控信息</div>
<ControlInfo ref="controlInfoRef" />
<div class="title-item">布控范围</div>
<ControlArea ref="controlAreaRef" />
<div class="title-item">审批信息</div>
<ApprovalInfo ref="approvalInfoRef" />
</div>
<el-dialog v-model="dialogVisible" title="审核" width="500px">
<FormMessage v-model="listQuery" :formList="formData" ref="elform">
<!-- 自定义原因字段渲染 -->
<template #bkshBtgyy>
<el-form-item
label="原因"
prop="bkshBtgyy"
v-if="listQuery.sftg === '0'"
>
<el-input
type="textarea"
v-model="listQuery.bkshBtgyy"
placeholder="请输入不通过原因"
/>
</el-form-item>
<div v-else></div>
</template>
</FormMessage>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleClose"> 确定 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, nextTick, getCurrentInstance, watch } from "vue";
import ControlInfo from "./ui/controlInfo.vue";
import ControlArea from "./ui/controlArea.vue";
import ApprovalInfo from "./ui/approvalInfo.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { info } from "sass";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF"); //获取字典数据
const listQuery = ref({}); //表单
const dialogForm = ref(false);
const router = useRouter();
const dialogVisible = ref(false);
// 获取子组件引用
const controlInfoRef = ref(null);
const controlAreaRef = ref(null);
const approvalInfoRef = ref(null);
const infoData = ref({});
const typetext = ref("");
const formData = ref([
{
label: "是否通过",
prop: "sftg",
type: "radio",
options: D_BZ_SF
},
{
label: "",
prop: "bkshBtgyy",
type: "slot"
}
]);
// 初始化数据
const init = async (type, row) => {
listQuery.value = {
...listQuery.value, // 保留原有值
...row,
sftg: "0" // 设置新值
};
typetext.value = type;
dialogForm.value = true;
await nextTick(); // 等待子组件挂载
controlInfoRef.value?.setFormData?.(row); // 回显布控信息
controlAreaRef.value?.setFormData?.(row); // 回显布控范围
approvalInfoRef.value?.setFormData?.(row); // 回显审批信息
};
const autoClick = () => {
dialogVisible.value = true;
};
// 提交审核/审批
const handleClose = async () => {
try {
const data = {
id: listQuery.value.id, // 主键id (required)
sftg: listQuery.value.sftg // 是否通过 (required)
};
// 如果不通过,添加原因
if (data.sftg !== "1") {
data.bkshBtgyy = listQuery.value.bkshBtgyy; // 不通过原因
}
// 根据 typetext.value 决定调用哪个接口
const apiUrl =
typetext.value === "auto"
? "/mosty-gsxt/tbGsxtBk/toExamine" // 审核接口
: "/mosty-gsxt/tbGsxtBk/audits"; // 审批接口
// 调用接口
const res = await qcckPost(data, apiUrl);
if (res) {
ElMessage.success(typetext.value === "auto" ? "审核成功" : "审批成功");
dialogVisible.value = false;
router.push({ name: "myControl" });
} else {
ElMessage.error(
res.message || (typetext.value === "auto" ? "审核失败" : "审批失败")
);
}
} catch (error) {
console.error(typetext.value === "auto" ? "审核出错:" : "审批出错:", error);
ElMessage.error("请求过程中发生错误");
}
};
const close = () => {
dialogForm.value = false;
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
.cntinfo {
color: #000;
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
.title-item {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
position: relative;
&::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
width: 78px;
height: 4px;
background: linear-gradient(
90deg,
#3597f9c4 0%,
rgba(53, 150, 249, 0) 100%
);
border-radius: 4px 4px 4px 4px;
}
}
}
}
</style>

View File

@ -1,205 +0,0 @@
<template>
<el-form :model="formData" label-width="auto" label-position="left">
<!-- 处置接收单位 -->
<FormMessage
v-model="listQuery"
:formList="formData"
ref="elform"
:rules="rules"
>
<!-- 自定义插槽人员标签 -->
<template #czJsdwdm>
<el-select
v-model="listQuery.czJsdwdm"
placeholder="请选择处置接收单位"
style="width: 240px"
:disabled="true"
>
<el-option
v-for="item in deptList"
:key="item.value"
:label="item.label"
:value="item.value.toString()"
/>
</el-select>
</template>
</FormMessage>
<!-- 审批流程 -->
<div class="approval-flow">
<div class="approval-flow">
<div class="step" v-for="(item, index) in step" :key="`${index}step`">
<div class="icon">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>
<div>{{ item.title }}</div>
<div class="desc">
<div class="description flexcc">
<!-- 使用方案1 + 方案2 -->
<div
class="description-item"
:class="{ 'disabled-item': item.default }"
>
{{ item.fqr }}
</div>
<div class="description-item">{{ item.fqbm }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import { fa } from "element-plus/es/locale.mjs";
import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_GS_BK_CZJSDWLX, D_GS_BK_TJFS } = proxy.$dict(
"D_GS_BK_CZJSDWLX",
"D_GS_BK_TJFS"
); //获取字典数据
const listQuery = ref({}); //表单
const deptList = ref([]); //部门列表
const formData = ref([
{
label: "处置接收单位",
prop: "czJsdwdm",
type: "slot"
},
{
label: "处置接收单位类型",
prop: "czJsdwlx",
type: "select",
options: D_GS_BK_CZJSDWLX,
disabled: true
},
// {
// label: "提交方式",
// prop: "bkTjfs",
// type: "radio",
// options: D_GS_BK_TJFS,
// disabled: true
// },
{
label: "签收时间",
prop: "bkSjQs",
type: "datetime",
disabled: true
}
]);
const rules = reactive({
bkBt: [{ required: true, message: "请选择处置接收单位", trigger: "blur" }],
// bkObj: [{ required: true, message: "请选择提交方式", trigger: "blur" }],
bkSjQs: [{ required: true, message: "请选择签收时间", trigger: "change" }]
});
const step = ref([
{ fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
{ fqr: "发起人", fqbm: "发起部门", title: "审核确认", default: false },
{ fqr: "发起人", fqbm: "发起部门", title: "审批确认", default: false }
]);
onMounted(() => {
getdepartmentList();
});
// 获取部门列表
const getdepartmentList = () => {
selectUserDeptPage().then((res) => {
deptList.value = res?.records.map((item) => ({
label: item.deptName,
value: item.deptId
}));
console.log(deptList.value, D_GS_BK_CZJSDWLX);
// tableData.value = res?.records;
});
};
// 接收父组件传入的数据并回显
const setFormData = (data) => {
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
step.value = [
{ fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
{
fqr: data.bkshrXm || "系统管理", // 审核人姓名
fqbm: data.bkshrSsbmmc || "西藏", // 审核部门
title: "审核确认"
},
{
fqr: data.bksprXm || "测试", // 审批人姓名
fqbm: data.bksprSsbmmc || "西藏", // 审批部门
title: "审批确认"
}
];
};
// 3. 暴露方法给父组件
defineExpose({
setFormData
});
</script>
<style lang="scss" scoped>
.step {
// position: relative;
display: flex;
gap: 5px;
box-sizing: border-box;
.desc {
margin: 5px;
color: #929090;
width: 350px;
}
.icon {
// position: absolute;
// top: 0;
// left: 0;
text-align: center;
.circle {
height: 14px;
width: 14px;
border-radius: 50%;
background-color: rgb(196, 219, 240);
}
.line {
margin: 0 auto;
width: 0;
height: calc(100% - 14px);
border: 1px dashed rgb(196, 219, 240);
}
}
}
.unit-selection {
display: flex;
align-items: center;
gap: 20px;
}
.description {
gap: 10px;
}
.description-item {
width: 300px;
height: 30px;
padding: 0 20px;
line-height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
color: rgb(131, 132, 135);
box-sizing: border-box;
}
.disabled-item {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
</style>

View File

@ -1,192 +0,0 @@
<template>
<div class="control-area">
<FormMessage
v-model="listQuery"
:formList="formData"
ref="elform"
:rules="rules"
>
<!-- 布控范围-->
<template #bkfwList="{ row }">
<div class="boxlist">
<MyTable
:tableData="tableDate.bkfwList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
</template>
</MyTable>
</div>
</template>
</FormMessage>
</div>
</template>
<script setup>
import {
reactive,
ref,
onMounted,
getCurrentInstance,
nextTick,
computed
} from "vue";
const { proxy } = getCurrentInstance();
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
const { D_GS_BK_CZYQ, D_GS_BK_CZJSDWLX, D_GS_BK_DJ, D_GS_BK_YZ, D_GS_BK_SJLX } =
proxy.$dict(
"D_GS_BK_CZYQ",
"D_GS_BK_CZJSDWLX",
"D_GS_BK_DJ",
"D_GS_BK_YZ",
"D_GS_BK_SJLX"
); //获取字典数据
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const roleIds = ref([]); //选择弹窗角色id
const fileList = ref([]); //上传附件
const tableDate = reactive({
bkfwList: [], //表格数据
rybqList: [], //内置表格数据
keyCount: 0,
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
tableHeight: 225,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 90, //操作栏宽度
tableColumn: [
{ label: "集合名称", prop: "jhMc" },
{ label: "集合说明", prop: "jhSm" }
]
});
const formData = ref([
{ label: "布控范围", prop: "bkfwList", type: "slot", width: "90%" },
{
label: "布控时间类型",
prop: "bkSjLx",
type: "select",
options: D_GS_BK_SJLX,
disabled: true
},
{
label: "布控开始时间",
prop: "bkSjKs",
type: "datetime",
disabled: true
},
{
label: "布控结束时间",
prop: "bkSjJs",
type: "datetime",
disabled: true
},
{
label: "布控失效时间",
prop: "bkSjSx",
type: "datetime",
disabled: true
},
{
label: "处置要求",
prop: "czYq",
type: "select",
options: D_GS_BK_CZYQ,
disabled: true
},
{
label: "布控等级",
prop: "bkDj",
type: "select",
options: D_GS_BK_DJ,
disabled: true
},
{
label: "布控要旨",
prop: "bkYz",
type: "select",
options: D_GS_BK_YZ,
disabled: true
},
{
label: "布控事由",
prop: "bkSy",
type: "textarea",
disabled: true
},
{
label: "上传附件",
prop: "bkFj",
type: "upload",
isImg: false,
disabled: true
}
]);
const rules = reactive({
// bkSjKs: [{ required: true, message: "请选择布控开始时间", trigger: "blur" }],
// bkSjJs: [{ required: true, message: "请选择布控结束时间", trigger: "blur" }],
czYq: [{ required: true, message: "请选择处置要求", trigger: "change" }],
bkDj: [{ required: true, message: "请选择布控等级", trigger: "change" }],
bkYz: [{ required: true, message: "请选择布控要旨", trigger: "change" }]
});
const listQuery = ref({});
// 接收父组件传入的数据并回显
const setFormData = (data) => {
tableDate.bkfwList = data.bkfwList;
tableDate.rybqList = data.rybqList;
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
};
// 3. 暴露方法给父组件
defineExpose({
setFormData
});
</script>
<style lang="scss" scoped>
.control-area {
.map {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin: 10px 0;
}
.el-form {
/* max-width: 1200px;
margin: 20px auto; */
}
:deep(.el-textarea__inner) {
font-family: inherit;
}
}
.boxlist {
width: 99%;
height: 225px;
margin-top: 10px;
overflow: hidden;
}
</style>

View File

@ -1,282 +0,0 @@
<template>
<div class="info-container">
<!-- 布控信息 -->
<FormMessage v-model="listQuery" :formList="formData" ref="elform">
<!-- 预警标签模型-->
<template #yjbqList>
<div class="boxlist">
<MyTable
:tableData="tableDate.yjbqList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #bqYs="{ row }">
<DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
</template>
<template #bqDj="{ row }">
<DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
</template>
</MyTable>
</div>
</template>
</FormMessage>
<!-- 按钮 -->
<div class="btns">
</div>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #fjZp="{ row }">
<img width="30" src="@/assets/images/icon100.png" alt="" />
</template>
<template #ryXb="{ row }">
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
</template>
<template #qtTbsc="{ row }">
<div>
{{ row.qtTbsc == true ? "是" : "否" }}
</div>
</template>
<template #bkLx="{ row }">
<DictTag :tag="false" :value="row.bkLx" :options="D_GS_BK_LX" />
</template>
<!-- <template #controls="{ row }">
<el-button size="small" type="primary" link>查看档案</el-button>
<el-button size="small" type="primary" @click="editData(row)" link
>编辑</el-button
>
<el-button size="small" type="danger" @click="deleteData(row.id)" link
>删除</el-button
>
</template> -->
</MyTable>
<!-- 列表弹窗 -->
</div>
</template>
<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import { add } from "lodash";
import { tr } from "element-plus/es/locale.mjs";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_GS_BK_DX, D_GS_BK_SSJZ, D_GS_SSYJ, D_GS_BQ_DJ, D_BZ_XB, D_GS_BK_LX } =
proxy.$dict(
"D_GS_BK_DX",
"D_GS_BK_SSJZ",
"D_GS_SSYJ",
"D_GS_BQ_DJ",
"D_BZ_XB",
"D_GS_BK_LX"
); //获取字典数据
const formRef = ref();
const dialogFormVisible = ref(false);
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const listQuery = ref({}); //表单
const roleIds = ref([]); //角色id
const dialogTitle = ref("新增信息"); //弹窗标题
// 表单数据
const formForData = ref({
ryXm: "", // 姓名
ryXb: "", // 性别
rySfzh: "", // 身份证号
ryHjd: "", // 户籍地
ryXjd: "", // 现居住地
rySjhm: "", // 手机号
qtTbsc: false, // 同步上传
clCph: "", // 车牌号
clCjh: "", // 车号
qtTxzh: "", // 特许证号
bkLx: "", // 人员标签
fjZp: "" // 照片
});
// 表单字段配置
const formDataModel = ref([
{ label: "姓名", prop: "ryXm", type: "input", width: "45%" },
{
label: "性别",
prop: "ryXb",
type: "select",
options: D_BZ_XB,
width: "45%"
},
{ label: "身份证号", prop: "rySfzh", type: "input", width: "45%" },
{ label: "户籍地", prop: "ryHjd", type: "input", width: "45%" },
{ label: "现居住地", prop: "ryXjd", type: "input", width: "45%" },
{ label: "手机号", prop: "rySjhm", type: "input", width: "45%" },
{ label: "同步上传", prop: "qtTbsc", type: "switch" },
{ label: "车牌号", prop: "clCph", type: "input", width: "45%" },
{ label: "车架号", prop: "clCjh", type: "input", width: "45%" },
{ label: "特许证号", prop: "qtTxzh", type: "input", width: "45%" },
{
label: "布控类型",
prop: "bkLx",
type: "radio",
width: "45%",
options: D_GS_BK_LX
},
{ label: "照片", prop: "fjZp", type: "upload" },
{ label: "人员标签", prop: "rybqList", type: "slot", width: "100%" } // 使用插槽自定义
]);
// 表单验证规则
// const rulesModel = {
// ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
// ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
// rySfzh: [
// { required: true, message: "请输入身份证号", trigger: "blur" },
// {
// pattern: /^\d{17}[\dXx]$/,
// message: "身份证号格式不正确",
// trigger: "blur"
// }
// ],
// rySjhm: [
// { required: true, message: "请输入手机号", trigger: "blur" },
// { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
// ]
// };
const tableDate = reactive({
yjbqList: [], //表格数据
rybqList: [], //内置表格数据
keyCount: 0,
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
tableHeight: 225,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 90, //操作栏宽度
tableColumn: [
{ label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
{ label: "标签代码", prop: "bqDm" },
{ label: "标签等级", prop: "bqDj", showSolt: true },
{ label: "标签颜色", prop: "bqYs", showSolt: true }
]
});
const editFormRef = ref(null);
const currentEditIndex = ref(null);
const pageData = reactive({
tableData: [], //表格数据
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false,
size: "small",
border: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 220, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "fjZp", showSolt: true },
{ label: "姓名", prop: "ryXm" },
{ label: "性别", prop: "ryXb", showSolt: true },
{ label: "身份证号", prop: "rySfzh" },
{ label: "户籍地", prop: "ryHjd" },
{ label: "现居住地", prop: "ryXjd" },
{ label: "手机号", prop: "rySjhm" },
{ label: "同步上传", prop: "qtTbsc", showSolt: true },
{ label: "车牌号", prop: "clCph" },
{ label: "车架号", prop: "clCjh" },
{ label: "特许证号", prop: "qtTxzh" },
{ label: "布控类型", prop: "bkLx", showSolt: true },
{ label: "人员标签", prop: "" }
]
});
const formData = ref([
{
label: "布控标题",
prop: "bkBt",
type: "input",
disabled: true
},
{
label: "所属警种",
prop: "bkSsjz",
type: "select",
options: D_GS_BK_SSJZ,
disabled: true
},
{
label: "布控对象",
prop: "bkDx",
type: "select",
options: D_GS_BK_DX,
disabled: true
},
{ label: "预警标签模型", prop: "yjbqList", type: "slot", width: "80%" }
]);
// const rules = reactive({
// bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
// bkObj: [{ required: true, message: "请选择布控对象", trigger: "blur" }],
// yjbqList: [
// { required: true, message: "请选择预警标签模型", trigger: "change" }
// ]
// });
// 接收父组件传入的数据并回显
const setFormData = (data) => {
tableDate.yjbqList = data.yjbqList;
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
pageData.tableData = data.bkdxList;
console.log(listQuery.value);
};
// 3. 暴露方法给父组件
defineExpose({
setFormData
});
</script>
<style lang="scss" scoped>
.info-container {
.btns {
margin-bottom: 10px;
}
}
.boxlist {
width: 99%;
height: 225px;
margin-top: 10px;
overflow: hidden;
}
</style>

View File

@ -1,215 +0,0 @@
<template>
<el-dialog
:title="titleValue"
width="900px"
:model-value="modelValue"
append-to-body
@close="closed"
>
<div>
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
<el-form-item label="集合名称">
<el-input
placeholder="请输入集合名称"
v-model="listQuery.jhMc"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div
class="tabBox"
:class="props.Single ? 'tabBoxRadio' : ''"
style="margin-top: 0px"
>
<el-table
v-loading="loading"
ref="multipleUserRef"
@selection-change="handleSelectionChange"
:data="tableData"
border
:row-key="keyid"
style="width: 100%"
height="450"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table-column prop="jhMc" align="center" label="集合名称" />
<el-table-column prop="jhSm" align="center" label="集合说明" />
</el-table>
</div>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closed">取消</el-button>
<el-button type="primary" @click="onComfirm">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const props = defineProps({
modelValue: {
type: Boolean,
required: true
},
dic: {
type: Object,
default: () => {}
},
bqDl: {
type: String,
default: "01"
},
bqLx: {
type: String,
default: "01"
},
titleValue: {
type: String,
default: "选择大类"
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: true
},
roleIds: {
type: Array,
default: []
}
});
const total = ref(0);
const listQuery = ref({
current: 1,
size: 20
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
onMounted(() => {
handleFilter();
});
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { current: 1, size: 20 };
getDataList();
};
const keyid = (row) => {
return row.id;
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("chooseDate", list);
let data = { type: props.LeaderType, userList: userList };
emits("chooseDateLeader", data);
closed();
};
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.size = currentSize;
getDataList();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.current = currentPage;
getDataList();
};
// 查询标签组合列表
const getDataList = () => {
const data = listQuery.value;
loading.value = true;
qcckGet(data, "/mosty-gsxt/tbGsxtGzyJh/selectPage").then((res) => {
tableData.value = res?.records;
total.value = Number(res.total);
loading.value = false;
multipleUser();
});
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.current = 1;
getDataList();
};
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

View File

@ -0,0 +1,282 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">布控对象</span>
<div>
<el-button @click="close">关闭</el-button>
</div>
</div>
<div class="form_cnt">
<el-form :model="listQuery" inline :label-width="100" label-position="left">
<div class="smallTitle">布控信息</div>
<el-form-item prop="bkbt" label="布控标题">
<MOSTY.Other v-model="listQuery.bkbt" placeholder="请输入布控标题" clearable />
</el-form-item>
<el-form-item prop="bkdx" label="布控对象">
<MOSTY.Select v-model="listQuery.bkbt" :dictEnum="bkdxList" placeholder="请选择布控对象" clearable />
</el-form-item>
<div class="ww100 mt10 mb10">
<el-button type="primary" @click="chooseVisible = true">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="danger">批量删除</el-button>
</div>
<div class="relative ww100">
<MyTable
:tableData="listQuery.tableDate"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #zp="{row}">
<el-image :src="row.zp"></el-image>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="primary" >查看档案</el-link>
<el-link type="primary" >编辑</el-link>
<el-link type="danger" >删除</el-link>
</template>
</MyTable>
</div>
<div class="smallTitle">布控范围</div>
<div class="ww100 relative mb10" style="height: 250px;border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden;">
<div class="absolute mapSearch flex">
<el-input v-model="listQuery.ssqy"></el-input>
<el-input v-model="listQuery.dtqy" class="ml10 mr10"></el-input>
<el-button type="primary">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">添加范围模型</span>
</el-button>
</div>
<GdMap></GdMap>
</div>
<el-form-item prop="bkbt" label="布控要素" style="width: 100%;">
<div class="flex align-center">
<el-button :type="activeName == it ? 'primary':''" v-for="it in btns" :key="it">{{ it }}</el-button>
</div>
</el-form-item>
<div style="width: 100%;" class="mt10">
<el-form-item prop="bkkssj" label="布控开始时间" >
<MOSTY.Date v-model="listQuery.bkkssj" placeholder="请选择布控开始时间" clearable />
</el-form-item>
<el-form-item prop="bkjssj" label="布控结束时间" >
<MOSTY.Date v-model="listQuery.bkjssj" placeholder="请选择布控结束时间" clearable />
</el-form-item>
</div>
<div style="width: 100%;" class="mt10">
<el-form-item prop="czys" label="处置要求" >
<MOSTY.Select v-model="listQuery.czys" :dictEnum="bkdxList" placeholder="请选择处置要求" clearable />
</el-form-item>
<el-form-item prop="bkjb" label="布控级别" >
<MOSTY.Select v-model="listQuery.bkjb" :dictEnum="bkdxList" placeholder="请选择布控级别" clearable />
</el-form-item>
</div>
<div style="width: 100%;" class="mt10">
<el-form-item prop="bksy" label="布控事由" style="width: 100%;">
<MOSTY.Other v-model="listQuery.bksy" placeholder="请输入布控事由" type="textarea" style="width: 100%;" clearable />
</el-form-item>
</div>
<div style="width: 100%;" class="mt10">
<el-form-item prop="fjdz" label="上传附件" style="width: 100%;">
<div>
<MOSTY.Upload :limit="10" v-model="listQuery.fjdz" />
<div>支持pngjpgpdf文件上传</div>
</div>
</el-form-item>
</div>
<div class="smallTitle">审批信息</div>
<el-form-item prop="czjsdw" label="处置接收单位" style="width: 100%;">
<div class="flex align-center ww100">
<MOSTY.Select v-model="listQuery.czjsdw" :dictEnum="bkdxList" style="width:260px;margin-right: 10px;" placeholder="请选择处置要求" clearable />
<el-radio-group v-model="listQuery.dwlx" class="flex align-center">
<el-radio label="3">责任单位</el-radio>
<el-radio label="6">活动发生地</el-radio>
<el-radio label="9">指定单位</el-radio>
</el-radio-group>
</div>
</el-form-item>
<div class="ww100 mt10 mb20">
<el-form-item prop="txfs" label="提醒方式">
<el-radio-group v-model="listQuery.txfs" class="flex align-center">
<el-radio label="3">消息推送</el-radio>
<el-radio label="6">短信推送</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="qssj" label="签收时间">
<MOSTY.Date v-model="listQuery.qssj" placeholder="请选择签收时间" clearable />
</el-form-item>
</div>
<div class="ww100">
<el-steps direction="vertical" :active="listQuery.wccz" space="500" finish-status="success">
<el-step title="发起申请" >
<template #description>
<div class="flex align-center ww100 mt10 mb20">
<el-input v-model="listQuery.fqr" class="ww20"></el-input>
<el-input v-model="listQuery.fqbm" class="ww20 ml10 mr10"></el-input>
<span class="f12" style="color: #333333;"> 备注发起人和部门根据登陆人自动填写</span>
</div>
</template>
</el-step>
<el-step title="审核确认" >
<template #description>
<div class="flex align-center ww100 mt10 mb20">
<el-input v-model="listQuery.shqr" class="ww20"></el-input>
</div>
</template>
</el-step>
<el-step title="审批确认" >
<template #description>
<div class="flex align-center ww100 mt10 mb20">
<el-input v-model="listQuery.spqr" class="ww20"></el-input>
</div>
</template>
</el-step>
</el-steps>
</div>
</el-form>
</div>
</div>
<!-- 选择布控人员 -->
<BkryDialod v-model="chooseVisible" @choosed="choosed" :roleIds="roleIds" />
</template>
<script setup>
import BkryDialod from './bkryDialod.vue';
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
dic: Object
});
const roleIds = ref([]); //角色ID
const chooseVisible = ref(false); //选择布控人员弹窗
const activeName = ref('人员信息'); //选中tab
const btns = reactive(['人员信息', '车辆信息', '电信通讯信息', '网络信息', '人像信息']); //按钮组
const bkdxList = ref([
{ label: "人员", value: "1" },
{ label: "群体", value: "2" },
]); //布控对象字典
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const listQuery = ref({
ssqy:'全国',
dtqy:'+范围选择(地图)',
dwlx:'3',
txfs:'3',
wccz: 1,
fqr:'布控发起人:张三',
fqbm:'发起部门:巴宜区公安局城区派出所',
shqr:'审核部门:巴宜区公安局',
spqr:'审批部门:巴宜区公安局',
tableDate: [{
zp: "https://via.placeholder.com/50",
xm: "张三",
xb: "男",
mz: "汉族",
sfzh: "123456789012345678",
hjd: "北京市朝阳区",
xjzdz: "北京市海淀区",
sjh: "13800138000",
xnsf: "虚拟身份123",
cph: "京A12345",
cjh: "1234567890",
tzms: "特征描述示例",
rybq: "人员标签示例"
}],
}); //表单数据
const tableDate = reactive({
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 200, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "zp",showSolt:true},
{ label: "姓名", prop: "xm" },
{ label: "性别", prop: "xb" },
{ label: "民族", prop: "mz" },
{ label: "身份证号", prop: "sfzh" },
{ label: "户籍地", prop: "hjd" },
{ label: "现居住地址", prop: "xjzdz" },
{ label: "手机号", prop: "sjh" },
{ label: "虚拟身份", prop: "xnsf" },
{ label: "车牌号", prop: "cph" },
{ label: "车架号", prop: "cjh" },
{ label: "特征描述", prop: "tzms" },
{ label: "人员标签", prop: "rybq" }
]
});
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
};
// 选择重点人
const choosed = (val) => {
// listQuery.value.bkdx = val.map(v => {
// return { bkdxDm: v.bkdxDm, bkdxId: v.id, bkdxMc: v.bkdxMc }
// });
// roleIds.value = val.map(v => v.id);
};
// 关闭
const close = () => {
listQuery.value = {};
dialogForm.value = false;
loading.value = false;
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.smallTitle{
width: 100%;
font-size: 15px;
line-height: 50px;
font-weight: 550;
color: #606266;
}
.mapSearch{
left: 10px;
top: 10px;
z-index: 100;
}
.dialog{
::v-deep .el-form-item--default{
margin: 0 1% 0 0 !important;
padding-bottom: 0 !important;
}
}
::v-deep .avatar-uploader{
display: flex;
}
::v-deep .el-upload--picture-card i{
width: 156px;
}
</style>

View File

@ -0,0 +1,97 @@
<template>
<el-dialog v-model="showDialog" :destroy-on-close="true" title="新增人员" @close="close" :close-on-click-modal="false">
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
<template #rybq>
<div class="marks pointer" @click="chooseMarksVisible = true">
<span style="color: rgb(175 178 184);padding-left: 10px;" v-if="!listQuery.bqList || listQuery.bqList.length == 0 ">请选择标签</span>
<span v-else >
<el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it,idx) in listQuery.bqList" :key="idx">{{ it.bqMc }}</el-tag >
</span>
</div>
</template>
</FormMessage>
<template #footer>
<div class="flex just-center">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="submitForm">确认</el-button>
</div>
</template>
</el-dialog>
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>
<script setup>
import ChooseMarks from "@/components/MyComponents/ChooseMarks/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { reactive, ref,getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { D_BZ_MZ } = proxy.$dict("D_BZ_MZ"); // 获取字典数据
const elform = ref()
const roleIds = ref([])
const showDialog = ref(false)
const chooseMarksVisible = ref(false)
const emit = defineEmits(['change'])
const listQuery = ref({})
const formData = ref([
{ label: "人员姓名", prop: "xm", type: "input" ,width:'45%'},
{ label: "身份证号", prop: "sfzh", type: "input" ,width:'45%'},
{ label: "手机号码", prop: "hjdz", type: "input",width:'45%' },
{ label: "人员民族", prop: "hjdpcsdm", type: "select" ,options:D_BZ_MZ,width:'45%'},
{ label: "户籍地址", prop: "bqList", type: "input",width:'100%',disabled:true },
{ label: "现居住地址", prop: "sfttr", type: "input",width:'100%'},
{ label: "特征描述", prop: "sfxyr", type: "input" ,width:'100%'},
{ label: "人员标签", prop: "rybq", type: "slot" ,width:'45%'},
{ label: "车牌号", prop: "wx", type: "input" ,width:'45%'},
{ label: "人员照片", prop: "qq", type: "upload" ,width:'45%'},
])
const rules = reactive({
xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
xb: [{ required: true, message: "请选择性别", trigger: "change" }],
sfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
hjd: [{ required: true, message: "请输入户籍地", trigger: "blur" }],
})
const title = ref('')
const order = ref(null)
const init = () =>{
showDialog.value = true;
}
// 选择标签
const choosed = (val) => {
listQuery.value.bqList = val.map(v=>{
return { bqDm:v.bqDm, bqId:v.id, bqLb:v.bqLb, bqLx:v.bqLx, bqMc:v.bqMc }
});
roleIds.value = val.map(v=>v.id)
}
// 删除数据
const closeTag = (idx) =>{
listQuery.value.bqList.splice(idx,1)
roleIds.value.splice(idx,1)
}
const submitForm = () =>{
elform.value.submit((val)=>{
emit('change',[val])
showDialog.value = false;
})
}
const close = () =>{
elform.value.reset();
showDialog.value = false;
}
defineExpose({init})
</script>
<style lang="scss" scoped>
.marks{
width: 100%;
width: 100%;
min-height: 32px;
border: 1px solid #e9e9e9;
border-radius: 4px;
}
</style>

View File

@ -1,86 +0,0 @@
<template>
<el-dialog v-model="dialogTableVisible" title="添加范围模型" width="1000px" @close="close">
<div class="dialog-container">
<el-form :model="formData" label-width="auto" label-position="left">
<div class="form-row">
<el-form-item label="模型名称">
<el-input v-model="formData.modelName" placeholder="请输入模型名称" />
</el-form-item>
<el-form-item label="感知模型类型" prop="region">
<el-select v-model="formData.region" placeholder="重点区域类型">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="生成时间范围">
<el-date-picker
v-model="formData.dateRange"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
/>
</el-form-item>
</div>
<el-form-item label="感知源信息">
<el-input v-model="formData.perceptionDomain" placeholder="请输入模型名称">
<template #append>
<el-button type="primary">选择感知源</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="地图范围">
<el-input v-model="formData.mapRange" placeholder="请输入模型名称">
<template #append>
<el-button type="primary">选择地图范围</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
<div class="map"></div>
</div>
</el-dialog>
</template>
<script setup>
import { ref } from "vue";
const formData = ref({
modelName: "",
perceptionDomain: "",
mapRange: "",
dateRange: [],
region: ""
});
const dialogTableVisible = ref(false);
// 初始化数据
const init = (type, row) => {
dialogTableVisible.value = true;
};
const close = () => {};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog-container {
height: 550px;
.map {
height: 400px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-row {
display: flex;
gap: 5px;
.el-form-item {
flex: 1;
}
}
}
</style>

View File

@ -0,0 +1,213 @@
<template>
<el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
<template #title>
<span class="mr10 f16">选择布控人员</span>
<el-button type="primary" size="small" @click="zdyaddPerson">添加其他人员</el-button>
</template>
<el-form :model="listQuery" :inline="true">
<el-form-item label="人员姓名">
<el-input placeholder="请输入人员姓名" v-model="listQuery.ryxm" clearable ></el-input>
</el-form-item>
<el-form-item label="身份证号">
<el-input placeholder="请输入身份证号" v-model="listQuery.sfzh" clearable ></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input placeholder="请输入手机号码" v-model="listQuery.sjhm" clearable ></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
<el-table ref="multipleUserRef" :key="keyTabel" @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" style="width: 100%" height="450">
<el-table-column type="selection" width="55" :reserve-selection="true"/>
<el-table-column prop="bqMc" align="center" label="照片"/>
<el-table-column prop="bqDm" align="center" label="姓名"/>
<el-table-column prop="bqDj" align="center" label="性别">
<template #default="{ row }">
<DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
</template>
</el-table-column>
<el-table-column prop="bqYs" align="center" label="民族">
<template #default="{ row }">
<DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
</template>
</el-table-column>
<el-table-column prop="bqDm" align="center" label="户籍地"/>
<el-table-column prop="bqDm" align="center" label="现居住址"/>
<el-table-column prop="bqDm" align="center" label="手机号"/>
<el-table-column prop="bqDm" align="center" label="虚拟身份"/>
<el-table-column prop="bqDm" align="center" label="车牌号"/>
<el-table-column prop="bqDm" align="center" label="车架号"/>
<el-table-column prop="bqDm" align="center" label="特征描述"/>
<el-table-column prop="bqDm" align="center" label="人员标签"/>
</el-table>
</div>
<div class="fenye flex just-end " :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@pageCurrent-change="handleCurrentChange"
:pageCurrent-page="listQuery.pageCurrent"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
<template #footer>
<div class="flex just-center">
<el-button type="primary" @click="onComfirm">确认</el-button>
<el-button @click="closed">取消</el-button>
</div>
</template>
</el-dialog>
<!-- 自定义选添加人 -->
<AddPeo ref="addPerson" @change="changeZdy"></AddPeo>
</template>
<script setup>
import AddPeo from './addPeo.vue'
import { qcckGet} from "@/api/qcckApi.js";
import { defineProps, ref ,getCurrentInstance, watch} from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_BQ_DJ,D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ","D_GS_SSYJ"); //获取字典数据
const props = defineProps({
modelValue: {
type: Boolean,
default:false
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: false
},
roleIds: {
type: Array,
default: []
}
});
const total = ref(0);
const listQuery = ref({
pageCurrent: 1,
pageSize: 20
});
const addPerson = ref()
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosed"]);
const keyTabel = ref(0)
const keyid = (row) => {
return row.id;
};
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { pageCurrent: 1, pageSize: 20, };
getListData();
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("choosed", list);
closed();
};
// 自定义加人
const changeZdy = (val) => {
emits("choosed", val);
closed();
}
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.pageSize = currentSize;
getListData();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.pageCurrent = currentPage;
getListData();
};
const getListData = () => {
keyTabel.value++
const params = {bqLb:'02',...listQuery.vlue}
qcckGet(params,'/mosty-gsxt/tbGsxtBqgl/selectPage').then(res=>{
tableData.value = res.records || [];
total.value = res.total;
multipleUser();
})
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
multipleUserRef.value.toggleRowSelection(item, false);
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.pageCurrent = 1;
getListData();
};
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
const zdyaddPerson = () => {
addPerson.value.init();
};
watch(()=>props.modelValue,val=>{
if(val) handleFilter();
},{immediate:true})
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

View File

@ -1,131 +0,0 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">开锁业务信息详情</span>
<div>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-form :model="listQuery" :label-width="230" label-position="left">
<div class="form-row">
<el-form-item label="业务流水号码">
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
</el-form-item>
<el-form-item label="开锁业务日期">
<el-input v-model="listQuery.ywrq" placeholder="2025/1/20 10:00:00"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="场所名称">
<el-input v-model="listQuery.csmc" placeholder="毛王开锁"/>
</el-form-item>
<el-form-item label="从业人员姓名">
<el-input v-model="listQuery.cyrxm" placeholder="张三"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="从业人员证件号码">
<el-input v-model="listQuery.cyrzjhm" placeholder="511123456789654125"/>
</el-form-item>
<el-form-item label="请求开锁人姓名">
<el-input v-model="listQuery.qqksrxm" placeholder="李四"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="请求开锁人证件号码">
<el-input v-model="listQuery.qqksrzjhm" placeholder="511111111111111111"/>
</el-form-item>
<el-form-item label="开锁业务地址">
<el-input v-model="listQuery.ywdz" placeholder="林芝市巴宜区xxxx路18号"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="开锁业务类型">
<el-input v-model="listQuery.ywlx" placeholder="开锁"/>
</el-form-item>
<el-form-item label="见证人姓名">
<el-input v-model="listQuery.jzrxm" placeholder="王五"/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="见证人证件号">
<el-input v-model="listQuery.jzrzjh" placeholder="514154785965214741"/>
</el-form-item>
<el-form-item label="见证人联系方式">
<el-input v-model="listQuery.jzrlxfs" placeholder="15222222222"/>
</el-form-item>
</div>
</el-form>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const dialogForm = ref(false);
const listQuery = ref({});
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
// 根据type和row初始化表单数据
};
const close = () => {
dialogForm.value = false;
};
defineExpose({init})
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
:deep(.el-form-item__label) {
background-color: #F7FAFB;
padding: 0px 8px;
color: #000;
font-weight: 500;
border: 1px solid #E3E7ED;
}
.head_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cntinfo{
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
.form-row {
display: flex;
.el-form-item {
flex: 1;
}
}
::v-deep .el-input__inner{
height: 36px !important;
line-height: 36px !important;
border-radius: 0;
color: #777575;
}
}
.el-form-item--default{
margin-bottom: 0px;
}
</style>

View File

@ -1,229 +0,0 @@
<template>
<el-dialog
:title="titleValue"
width="900px"
:model-value="modelValue"
append-to-body
@close="closed"
>
<div>
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
<el-form-item label="标签名称">
<el-input
placeholder="请输入标签名称"
v-model="listQuery.bqMc"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div
class="tabBox"
:class="props.Single ? 'tabBoxRadio' : ''"
style="margin-top: 0px"
>
<el-table
v-loading="loading"
ref="multipleUserRef"
@selection-change="handleSelectionChange"
:data="tableData"
border
:row-key="keyid"
style="width: 100%"
height="450"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table-column prop="bqMc" align="center" label="标签名称" />
<el-table-column prop="bqDm" align="center" label="标签代码" />
<el-table-column prop="bqDj" align="center" label="标签等级">
</el-table-column>
<el-table-column prop="bqYs" align="center" label="标签颜色">
<template #default="{ row }">
<DictTag
:value="row.bqYs"
:tag="false"
:options="props.dic.D_GS_SSYJ"
/>
</template>
</el-table-column>
</el-table>
</div>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closed">取消</el-button>
<el-button type="primary" @click="onComfirm">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const props = defineProps({
modelValue: {
type: Boolean,
required: true
},
dic: {
type: Object,
default: () => {}
},
bqDl: {
type: String,
default: "01"
},
bqLx: {
type: String,
default: "01"
},
titleValue: {
type: String,
default: "选择大类"
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: true
},
roleIds: {
type: Array,
default: []
}
});
const total = ref(0);
const listQuery = ref({
current: 1,
size: 20
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
onMounted(() => {
handleFilter();
});
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { current: 1, size: 20 };
getDataList();
};
const keyid = (row) => {
return row.id;
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("chooseDate", list);
let data = { type: props.LeaderType, userList: userList };
emits("chooseDateLeader", data);
closed();
};
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.size = currentSize;
getDataList();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.current = currentPage;
getDataList();
};
// 查询标签组合列表
const getDataList = () => {
const data = listQuery.value;
loading.value = true;
qcckGet(data, "/mosty-gsxt/tbGsxtBqzh/selectPage").then((res) => {
tableData.value = res?.records;
total.value = Number(res.total);
loading.value = false;
multipleUser();
});
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.current = 1;
getDataList();
};
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
:deep(.el-dialog) {
background: #fff !important;
border-radius: 8px !important;
/* 其他样式 */
}
</style>

View File

@ -1,168 +0,0 @@
<template>
<div class="drawer-model">
<el-drawer v-model="drawer" title="范围模型(3)" direction="rtl" style="width: 300px">
<div class="project-list">
<!-- 搜索区域 -->
<div class="search-area">
<!-- 搜索区域 -->
<el-form :model="searchForm" label-width="auto" style="max-width: 600px">
<el-form-item label="模型名称">
<el-input v-model="searchForm.projectName" />
</el-form-item>
<el-form-item label="启用状态">
<el-select v-model="searchForm.status" placeholder="启用状态">
<el-option label="启用" value="shanghai" />
<el-option label="禁用" value="beijing" />
</el-select>
</el-form-item>
</el-form>
<div>
<el-button type="primary" icon="Search">查询</el-button>
<el-button type="primary" icon="CirclePlus" @click="areaModel">添加应用模型</el-button>
</div>
<!-- <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" /> -->
</div>
<!-- 列表区域 -->
<div class="list-area">
<div v-for="(item, index) in pageData.tableData" :key="index" class="list-item">
<div class="model-info">
<div class="model-name">巴宜区公路外国模型</div>
<div class="model-type">模型类型重点区域城规模型</div>
</div>
<el-divider border-style="dotted"></el-divider>
<div class="actions flexcb">
<el-checkbox v-model="item.checked" label="启用" />
<div class="btns">
<span class="set">设置</span>
<span class="delete">删除</span>
</div>
</div>
</div>
</div>
</div>
</el-drawer>
<!-- 添加范围模型 -->
<AreaModel ref="areaModelRef"></AreaModel>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import AreaModel from "./areaModel.vue";
const areaModelRef = ref();
const areaModel = () => {
areaModelRef.value.init();
};
const searchConfiger = ref([
{
label: "项目名称",
prop: "name",
placeholder: "请选择经营状况",
showType: "input"
},
{
label: "启用状态",
prop: "jyzt",
placeholder: "请选择经营状况",
showType: "select",
options: [{ label: "在业", value: "在业" }]
}
]);
// 搜索
const onSearch = val => {
searchForm.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
};
const searchForm = ref({
projectName: "",
status: ""
});
// 获取列表
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 pageData = reactive({
tableData: [
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false },
{ checked: false }
], //表格数据
keyCount: 0,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
} //分页
});
const drawer = ref(false);
// 初始化数据
const init = () => {
drawer.value = true;
// 根据type和row初始化表单数据
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.drawer-model {
header {
background: none;
}
:deep(.el-drawer) {
width: 400px !important;
}
}
.search-area {
margin-bottom: 20px;
}
.list-area {
display: flex;
flex-direction: column;
gap: 16px;
.model-name {
color: rgb(64, 158, 255);
font-size: 20px;
margin-bottom: 10px;
}
.model-type {
font-size: 18px;
color: #ccc;
}
}
.list-item {
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 16px;
.el-divider--horizontal {
margin: 10px 0;
}
}
.actions {
.btns {
.set {
color: rgb(64, 158, 255);
}
.delete {
margin-left: 10px;
color: rgb(245, 108, 108);
}
}
}
</style>

View File

@ -1,125 +0,0 @@
<template>
<el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
<div class="dialog-container">
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" class="seacrh" />
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
tableHeight="400px"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
const dialogTableVisible = ref(false);
const searchConfiger = ref([
{
label: "姓名",
prop: "name",
placeholder: "请输入场所名称",
showType: "input"
},
{
label: "身份证号",
prop: "idCard",
placeholder: "请输入从业人姓名",
showType: "input"
},
{
label: "车牌号",
prop: "plateNumber",
placeholder: "请输入场所名称",
showType: "input"
},
{
label: "车牌号",
prop: "plateNumber2",
placeholder: "请输入从业人姓名",
showType: "input"
}
]);
const pageData = reactive({
tableData: [
{
name: "1"
}
], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 120, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "photo", width: "80" },
{ label: "姓名", prop: "name", width: "100" },
{ label: "性别", prop: "gender", width: "80" },
{ label: "身份证号", prop: "idCard", width: "180" },
{ label: "户籍地", prop: "residence", width: "150" },
{ label: "现居住地", prop: "currentAddress", width: "150" },
{ label: "手机号", prop: "phone", width: "120" },
{ label: "虚拟身份", prop: "virtualId", width: "120" },
{ label: "车牌号", prop: "plateNumber", width: "120" },
{ label: "车牌号", prop: "plateNumber2", width: "120" },
{ label: "特征描述", prop: "features", width: "150" },
{ label: "人员标签", prop: "personTags", width: "150" }
]
});
// 初始化数据
const init = (type, row) => {
dialogTableVisible.value = true;
};
const close = () => {};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog-container {
// .box {
// flex-wrap: nowrap !important;
// }
.seacrh {
.box {
flex-wrap: nowrap !important;
}
}
}
</style>

View File

@ -1,140 +0,0 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">发起布控</span>
<div>
<el-button size="small" @click="submit">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<div class="title-item">布控信息</div>
<ControlInfo ref="controlInfoRef" />
<div class="title-item">布控范围</div>
<ControlArea ref="controlAreaRef" />
<div class="title-item">审批信息</div>
<ApprovalInfo ref="approvalInfoRef" />
</div>
</div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import ControlInfo from "./ui/controlInfo.vue";
import ControlArea from "./ui/controlArea.vue";
import ApprovalInfo from "./ui/approvalInfo.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const dialogForm = ref(false);
const router = useRouter();
const listQuery = ref({});
// 获取子组件引用
const controlInfoRef = ref(null);
const controlAreaRef = ref(null);
const approvalInfoRef = ref(null);
// 初始化数据
const init = async (type, row) => {
dialogForm.value = true;
await nextTick(); // 等待子组件挂载
// 根据type和row初始化表单数据
// 如果是编辑模式,将数据传递给子组件
if (type === "edit" && row) {
controlInfoRef.value?.setFormData?.(row); // 回显布控信息
controlAreaRef.value?.setFormData?.(row); // 回显布控范围
approvalInfoRef.value?.setFormData?.(row); // 回显审批信息
} else {
// 如果是新增模式,清空表单(可选)
controlInfoRef.value?.resetForm?.();
controlAreaRef.value?.resetForm?.();
approvalInfoRef.value?.resetForm?.();
}
};
const cleanObj = (obj) => {
if (!obj) return {};
return Object.fromEntries(
Object.entries(obj).filter(([_, v]) => v !== null && v !== undefined)
);
};
const submit = async () => {
try {
// 1. 分别获取各子组件数据
const controlInfoData = controlInfoRef.value?.getFormData?.();
const controlAreaData = controlAreaRef.value?.getFormData?.();
const approvalInfoData = approvalInfoRef.value?.getFormData?.();
// 2. 合并数据
const formData = {
...cleanObj(controlInfoData?.formData),
...cleanObj(controlAreaData?.formData),
...cleanObj(approvalInfoData?.formData)
};
// 根据是否有 id 判断是新增还是编辑
const url = formData.id
? "/mosty-gsxt/tbGsxtBk/update" // 编辑接口
: "/mosty-gsxt/tbGsxtBk/save"; // 新增接口
// 提交数据
await qcckPost(formData, url);
ElMessage.success(formData.id ? "编辑成功" : "新增成功");
close();
// 触发父组件方法
if (window.parent.updateList) {
window.parent.getList(); // 调用父组件方法
}
router.push("@/views/backOfficeSystem/IntelligentControl/myControl/index");
// qcckPost(formData, "/mosty-gsxt/tbGsxtBk/save").then((res) => {
// router.push(
// "@/views/backOfficeSystem/IntelligentControl/myControl/index"
// );
// });
} catch (error) {
console.error("提交失败:", error);
ElMessage.error(error.message || "提交失败");
}
};
const close = () => {
dialogForm.value = false;
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
.cntinfo {
color: #000;
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
.title-item {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
position: relative;
&::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
width: 78px;
height: 4px;
background: linear-gradient(
90deg,
#3597f9c4 0%,
rgba(53, 150, 249, 0) 100%
);
border-radius: 4px 4px 4px 4px;
}
}
}
}
</style>

View File

@ -1,341 +0,0 @@
<template>
<el-form :model="formData" label-width="auto" label-position="left">
<!-- 处置接收单位 -->
<!-- <el-form-item label="处置接收单位">
<div class="unit-selection">
<el-select v-model="formData.receivingUnit" placeholder="请选择单位" style="width: 200px">
<el-option label="巴宜区公安局" value="巴宜区公安局" />
</el-select>
<el-checkbox-group v-model="formData.unitTypes">
<el-checkbox label="责任单位">责任单位</el-checkbox>
<el-checkbox label="活动发生地">活动发生地</el-checkbox>
<el-checkbox label="指定单位">指定单位</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="提交方式">
<el-checkbox-group v-model="formData.submitMethods">
<el-checkbox label="网络推送">网络推送</el-checkbox>
<el-checkbox label="短信发送">短信发送</el-checkbox>
</el-checkbox-group>
</el-form-item></el-col
>
<el-col :span="6"
><el-form-item label="签收时间">
<el-date-picker
v-model="formData.receiveTime"
type="datetime"
placeholder="签收时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
/> </el-form-item
></el-col>
</el-row> -->
<FormMessage
v-model="listQuery"
:formList="formData"
ref="elform"
:rules="rules"
>
<!-- 自定义插槽人员标签 -->
<template #czJsdwdm>
<el-select
v-model="listQuery.czJsdwdm"
placeholder="请选择处置接收单位"
style="width: 240px"
>
<el-option
v-for="item in deptList"
:key="item.value"
:label="item.label"
:value="item.value.toString()"
/>
</el-select>
</template>
</FormMessage>
<!-- 审批流程 -->
<div class="approval-flow">
<div class="approval-flow">
<div class="step" v-for="(item, index) in step" :key="`${index}step`">
<div class="icon">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>
<div>{{ item.title }}</div>
<div class="desc">
<div class="description flexcc">
<!-- 使用方案1 + 方案2 -->
<div
class="description-item"
:class="{ 'disabled-item': item.default }"
@click="!item.default && handleSelectStep(index)"
>
{{ item.fqr }}
</div>
<div class="description-item">{{ item.fqbm }}</div>
<div class="step-description" v-if="item.description">
{{ item.description }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ChooseUser
v-model="chooseUserVisible"
@choosedUsers="handleUserSelected"
:roleIds="roleIds"
/>
</el-form>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/index.vue";
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/dialogList.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { fa } from "element-plus/es/locale.mjs";
import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_GS_BK_CZJSDWLX, D_GS_BK_TJFS } = proxy.$dict(
"D_GS_BK_CZJSDWLX",
"D_GS_BK_TJFS"
); //获取字典数据
const listQuery = ref({}); //表单
const chooseUserVisible = ref(false); //审批流程
const roleIds = ref([]); //角色id
let currentSelectedIndex = null;
const deptList = ref([]); //部门列表
const formData = ref([
{
label: "处置接收单位",
prop: "czJsdwdm",
type: "slot"
},
{
label: "处置接收单位类型",
prop: "czJsdwlx",
type: "select",
options: D_GS_BK_CZJSDWLX
},
// {
// label: "提交方式",
// prop: "bkTjfs",
// type: "radio",
// options: D_GS_BK_TJFS
// },
{
label: "签收时间",
prop: "bkSjQs",
type: "datetime"
}
]);
const rules = reactive({
bkBt: [{ required: true, message: "请选择处置接收单位", trigger: "blur" }],
// bkObj: [{ required: true, message: "请选择提交方式", trigger: "blur" }],
bkSjQs: [{ required: true, message: "请选择签收时间", trigger: "change" }]
});
const step = ref([
{ fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
{
fqr: "发起人",
fqbm: "发起部门",
title: "审核确认",
default: false,
status: "", // 动态设置状态
description: "" // 动态设置描述(如不通过原因)
},
{
fqr: "发起人",
fqbm: "发起部门",
title: "审批确认",
default: false,
status: "", // 动态设置状态
description: "" // 动态设置描述(如不通过原因)
}
]);
onMounted(() => {
getdepartmentList();
});
// 获取部门列表
const getdepartmentList = () => {
selectUserDeptPage().then((res) => {
deptList.value = res?.records.map((item) => ({
label: item.deptName,
value: item.deptId
}));
console.log(deptList.value, D_GS_BK_CZJSDWLX);
// tableData.value = res?.records;
});
};
// 处理选择的人员数据
const handleUserSelected = (userData) => {
if (currentSelectedIndex !== null) {
step.value[currentSelectedIndex] = {
...step.value[currentSelectedIndex],
fqr: userData[0].userName,
fqbm: userData[0].deptName,
userId: userData[0].id,
rawData: userData[0] // 保留原始数据(可选)
};
if (currentSelectedIndex == 1) {
// 同时更新listQuery如果需要
listQuery.value = {
...listQuery.value,
bkshrSfzh: userData[0].idEntityCard,
bkshrSsbmdm: userData[0].deptId,
bkshrSsbmmc: userData[0].deptName,
bkshrXm: userData[0].userName
};
} else if (currentSelectedIndex == 2) {
// 同时更新listQuery如果需要
listQuery.value = {
...listQuery.value,
bksprSfzh: userData[0].idEntityCard,
bksprSsbmdm: userData[0].deptId,
bksprSsbmmc: userData[0].deptName,
bksprXm: userData[0].userName
};
}
}
chooseUserVisible.value = false;
};
// 点击步骤触发
const handleSelectStep = (index) => {
currentSelectedIndex = index;
chooseUserVisible.value = true;
};
// 2. 暴露获取数据的方法
const getFormData = () => {
// 可以在这里添加验证逻辑
return {
formData: listQuery.value
};
};
// 接收父组件传入的数据并回显
const setFormData = (data) => {
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
step.value = [
{ fqr: "发起人", fqbm: "发起部门", title: "发起申请", default: true },
{
fqr: data.bkshrXm || "系统管理", // 审核人姓名
fqbm: data.bkshrSsbmmc || "西藏", // 审核部门
title: "审核确认",
status: "", // 动态设置状态
description: "" // 动态设置描述(如不通过原因)
},
{
fqr: data.bksprXm || "测试", // 审批人姓名
fqbm: data.bksprSsbmmc || "西藏", // 审批部门
title: "审批确认",
status: "", // 动态设置状态
description: "" // 动态设置描述(如不通过原因)
}
];
// 根据 bkZt 的值设置不同的状态
switch (data.bkZt) {
case "02": // 审核中
step.value[1].status = "process";
step.value[1].description = "审核中";
break;
case "03": // 审核不通过
step.value[1].status = "error";
step.value[1].description = `审核不通过(原因:${data.bkshBtgyy}`;
break;
case "04": // 审批中
step.value[1].status = "finish"; // 审核已完成
step.value[2].status = "process"; // 审批中
step.value[2].description = "审批中";
break;
case "05": // 审批通过
step.value[1].status = "finish"; // 审核已完成
step.value[2].status = "finish"; // 审批已完成
step.value[2].description = "审批通过";
break;
case "06": // 审批不通过
step.value[1].status = "finish"; // 审核已完成
step.value[2].status = "error"; // 审批不通过
step.value[2].description = `审批不通过(原因:${data.bkshBtgyy}`;
break;
default:
break;
}
};
// 3. 暴露方法给父组件
defineExpose({
getFormData,
setFormData
});
</script>
<style lang="scss" scoped>
.step {
// position: relative;
display: flex;
gap: 5px;
box-sizing: border-box;
.desc {
margin: 5px;
color: #929090;
// width: 350px;
}
.icon {
// position: absolute;
// top: 0;
// left: 0;
text-align: center;
.circle {
height: 14px;
width: 14px;
border-radius: 50%;
background-color: rgb(196, 219, 240);
}
.line {
margin: 0 auto;
width: 0;
height: calc(100% - 14px);
border: 1px dashed rgb(196, 219, 240);
}
}
}
.unit-selection {
display: flex;
align-items: center;
gap: 20px;
}
.description {
gap: 10px;
}
.description-item {
width: 300px;
height: 30px;
padding: 0 20px;
line-height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
color: rgb(131, 132, 135);
box-sizing: border-box;
}
.disabled-item {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
</style>

View File

@ -1,350 +0,0 @@
<template>
<div class="control-area">
<FormMessage
v-model="listQuery"
:formList="formData"
ref="elform"
:rules="rules"
>
<!-- 布控范围-->
<template #bkfwList="{ row }">
<el-button @click="openDialog('01')">选择</el-button>
<div class="boxlist">
<MyTable
:tableData="tableDate.bkfwList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
</template>
</MyTable>
</div>
</template>
<!-- 布控范围-->
<template #bkSjSx>
{{
listQuery?.bkSjKs && listQuery?.bkSjJs
? calculateDays(listQuery.bkSjKs, listQuery.bkSjJs)
: "--"
}}
</template>
</FormMessage>
<!-- 列表弹窗 -->
<DialogList
:Single="false"
:roleIds="roleIds"
v-if="chooseShow"
@chooseDate="chooseDate"
:titleValue="chooseTitle"
v-model="chooseShow"
:bqLx="chooseType"
:dic="{ D_GS_SSYJ }"
bqDl="02"
></DialogList>
<!-- <div class="map"></div> -->
<!-- <el-form :model="formData" label-width="auto" label-position="left">
时间选择 -->
<!-- <el-row :gutter="20">
<el-col :span="6">
<el-form-item label="布控开始时间">
<el-date-picker
v-model="formData.bkSjKs"
type="datetime"
placeholder="选择开始时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控结束时间">
<el-date-picker
v-model="formData.bkSjJs"
type="datetime"
placeholder="选择结束时间"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DD HH:mm"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row> -->
<!-- 布控要求和级别 -->
<!-- <el-row :gutter="20">
<el-col :span="6">
<el-form-item label="处置要求">
<el-select v-model="formData.czYq" placeholder="请选择">
<el-option
:label="item.label"
:value="item.id"
v-for="item in D_GS_BK_CZYQ"
:key="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控等级">
<el-select v-model="formData.bkDj" placeholder="请选择">
<el-option
:label="item.label"
:value="item.id"
v-for="item in D_GS_BK_DJ"
:key="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="布控要旨">
<el-select v-model="formData.bkYz" placeholder="请选择">
<el-option
:label="item.label"
:value="item.id"
v-for="item in D_GS_BK_YZ"
:key="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<!-- 布控事由 -->
<!-- <el-form-item label="布控事由">
<el-input
v-model="formData.bkSy"
type="textarea"
:rows="4"
placeholder="请输入布控事由"
/>
</el-form-item> -->
<!-- 上传附件 -->
<!-- <el-form-item label="上传附件">
<el-upload
action="#"
:auto-upload="false"
:on-change="handleFileChange"
:file-list="fileList"
>
<el-button type="primary">
<el-icon><Plus /></el-icon>
支持jpgpngpdf等上传
</el-button>
</el-upload>
</el-form-item>
</el-form> -->
</div>
</template>
<script setup>
import {
reactive,
ref,
onMounted,
getCurrentInstance,
nextTick,
computed
} from "vue";
const { proxy } = getCurrentInstance();
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/ui/dialogList.vue";
const { D_GS_BK_CZYQ, D_GS_BK_CZJSDWLX, D_GS_BK_DJ, D_GS_BK_YZ, D_GS_BK_SJLX } =
proxy.$dict(
"D_GS_BK_CZYQ",
"D_GS_BK_CZJSDWLX",
"D_GS_BK_DJ",
"D_GS_BK_YZ",
"D_GS_BK_SJLX"
); //获取字典数据
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const roleIds = ref([]); //选择弹窗角色id
const fileList = ref([]); //上传附件
const tableDate = reactive({
bkfwList: [], //表格数据
rybqList: [], //内置表格数据
keyCount: 0,
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
tableHeight: 225,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 90, //操作栏宽度
tableColumn: [
{ label: "集合名称", prop: "jhMc" },
{ label: "集合说明", prop: "jhSm" }
]
});
const formData = ref([
{ label: "布控范围", prop: "bkfwList", type: "slot", width: "90%" },
{
label: "布控时间类型",
prop: "bkSjLx",
type: "select",
options: D_GS_BK_SJLX
},
{
label: "布控开始时间",
prop: "bkSjKs",
type: "datetime"
},
{
label: "布控结束时间",
prop: "bkSjJs",
type: "datetime"
},
{
label: "布控失效时间",
prop: "bkSjSx",
type: "slot"
},
{
label: "处置要求",
prop: "czYq",
type: "select",
options: D_GS_BK_CZYQ
},
{
label: "布控等级",
prop: "bkDj",
type: "select",
options: D_GS_BK_DJ
},
{
label: "布控要旨",
prop: "bkYz",
type: "select",
options: D_GS_BK_YZ
},
{
label: "布控事由",
prop: "bkSy",
type: "textarea"
},
{
label: "上传附件",
prop: "bkFj",
type: "upload",
isImg: false
}
]);
const rules = reactive({
// bkSjKs: [{ required: true, message: "请选择布控开始时间", trigger: "blur" }],
// bkSjJs: [{ required: true, message: "请选择布控结束时间", trigger: "blur" }],
czYq: [{ required: true, message: "请选择处置要求", trigger: "change" }],
bkDj: [{ required: true, message: "请选择布控等级", trigger: "change" }],
bkYz: [{ required: true, message: "请选择布控要旨", trigger: "change" }]
});
const listQuery = ref({});
// 打开弹窗
const openDialog = (type) => {
chooseShow.value = true;
chooseType.value = type;
chooseTitle.value = type == "01" ? "请选择布控范围" : "请选择人员标签";
roleIds.value =
type == "01"
? tableDate.bkfwList.map((item) => item.id)
: tableDate.rybqList.map((item) => item.id);
};
const calculateDays = (start, end) => {
if (!start || !end) return null; // 如果参数为空,返回 null
const startDate = new Date(start);
const endDate = new Date(end);
// 检查日期是否有效
if (isNaN(startDate) || isNaN(endDate)) return null;
const diffInDays = (endDate - startDate) / (24 * 60 * 60 * 1000); // 计算天数差
return diffInDays.toFixed(1); // 保留1位小数返回字符串如 "6.3"
};
// 选择数据
const chooseDate = (data) => {
if (chooseType.value == "01") {
tableDate.bkfwList = data;
listQuery.value.bkfwList = tableDate.bkfwList.map((item) => item.id);
} else {
tableDate.rybqList = data;
listQuery.value.rybqList = tableDate.rybqList.map((item) => item.id);
}
};
const handleFileChange = (file, fileList) => {
console.log(file, fileList);
};
// 2. 暴露获取数据的方法
const getFormData = () => {
if (listQuery.value.bkSjLx == "01") {
listQuery.value.bkSjSx = calculateDays(listQuery.value.bkSjKs, listQuery.value.bkSjJs);
}
console.log(listQuery.value, "listQuery.value",'数据');
// 可以在这里添加验证逻辑
return {
formData: listQuery.value
};
};
// 接收父组件传入的数据并回显
const setFormData = (data) => {
tableDate.bkfwList = data.bkfwList ?? [];
tableDate.rybqList = data.rybqList ?? [];
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
};
// 3. 暴露方法给父组件
defineExpose({
getFormData,
setFormData
});
</script>
<style lang="scss" scoped>
.control-area {
.map {
height: 200px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin: 10px 0;
}
.el-form {
/* max-width: 1200px;
margin: 20px auto; */
}
:deep(.el-textarea__inner) {
font-family: inherit;
}
}
.boxlist {
width: 99%;
height: 225px;
margin-top: 10px;
overflow: hidden;
}
</style>

View File

@ -1,534 +0,0 @@
<template>
<div class="info-container">
<!-- 布控信息 -->
<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="布控标题">
<el-input
v-model="formInline.bkBt"
placeholder="请输入布控标题"
clearable
/>
</el-form-item>
<el-form-item label="预警标签模型">
<el-select
v-model="formInline.region"
placeholder="Activity zone"
clearable
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="所属警钟">
<el-select
v-model="formInline.bkSsjz"
placeholder="Activity zone"
clearable
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="布控对象">
<el-select
v-model="formInline.person"
placeholder="Activity zone"
clearable
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</el-form> -->
<FormMessage v-model="listQuery" :formList="formData" ref="elform">
<!-- 预警标签模型-->
<template #yjbqList>
<el-button @click="openDialog('01')">选择</el-button>
<div class="boxlist">
<MyTable
:tableData="tableDate.yjbqList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #bqYs="{ row }">
<DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
</template>
<template #bqDj="{ row }">
<DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.id, '预警标签')"
>删除</el-link
>
</template>
</MyTable>
</div>
</template>
</FormMessage>
<!-- 按钮 -->
<div class="btns">
<el-button type="primary" @click="handleAdd()">新增</el-button>
<el-button type="danger">批量删除</el-button>
</div>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #fjZp="{ row }">
<img width="30" src="@/assets/images/icon100.png" alt="" />
</template>
<template #ryXb="{ row }">
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
</template>
<template #qtTbsc="{ row }">
<div>
{{ row.qtTbsc == true ? "是" : "否" }}
</div>
</template>
<template #bkLx="{ row }">
<DictTag :tag="false" :value="row.bkLx" :options="D_GS_BK_LX" />
</template>
<template #controls="{ row }">
<el-button size="small" type="primary" link>查看档案</el-button>
<el-button size="small" type="primary" @click="editData(row)" link
>编辑</el-button
>
<el-button size="small" type="danger" @click="deleteData(row.id)" link
>删除</el-button
>
</template>
</MyTable>
<!-- 列表弹窗 -->
<DialogList
:Single="false"
:roleIds="roleIds"
v-if="chooseShow"
@chooseDate="chooseDate"
:titleValue="chooseTitle"
v-model="chooseShow"
:bqLx="chooseType"
:dic="{ D_GS_SSYJ }"
bqDl="02"
></DialogList>
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800px">
<FormMessage
v-model="formForData"
:formList="formDataModel"
ref="formRef"
label-width="120px"
>
<!-- 自定义插槽人员标签 -->
<template #rybqList>
<el-button @click="openDialog('02')">选择</el-button>
<div class="boxlist">
<MyTable
:tableData="tableDate.rybqList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.rykeyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #bqYs="{ row }">
<DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
</template>
<template #bqDj="{ row }">
<DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.id, '人员标签')"
>删除</el-link
>
</template>
</MyTable>
</div>
</template>
</FormMessage>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">关闭</el-button>
<el-button type="primary" @click="submitForm"> 确定 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/dialogList.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import { add } from "lodash";
import { tr } from "element-plus/es/locale.mjs";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_GS_BK_DX, D_GS_BK_SSJZ, D_GS_SSYJ, D_GS_BQ_DJ, D_BZ_XB, D_GS_BK_LX } =
proxy.$dict(
"D_GS_BK_DX",
"D_GS_BK_SSJZ",
"D_GS_SSYJ",
"D_GS_BQ_DJ",
"D_BZ_XB",
"D_GS_BK_LX"
); //获取字典数据
const formRef = ref();
const dialogFormVisible = ref(false);
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const listQuery = ref({}); //表单
const roleIds = ref([]); //角色id
const dialogTitle = ref("新增信息"); //弹窗标题
// 表单数据
const formForData = ref({
ryXm: "", // 姓名
ryXb: "", // 性别
rySfzh: "", // 身份证号
ryHjd: "", // 户籍地
ryXjd: "", // 现居住地
rySjhm: "", // 手机号
qtTbsc: false, // 同步上传
clCph: "", // 车牌号
clCjh: "", // 车号
qtTxzh: "", // 特许证号
bkLx: "", // 人员标签
fjZp: "" // 照片
});
// 表单字段配置
const formDataModel = ref([
{ label: "姓名", prop: "ryXm", type: "input", width: "45%" },
{
label: "性别",
prop: "ryXb",
type: "select",
options: D_BZ_XB,
width: "45%"
},
{ label: "身份证号", prop: "rySfzh", type: "input", width: "45%" },
{ label: "户籍地", prop: "ryHjd", type: "input", width: "45%" },
{ label: "现居住地", prop: "ryXjd", type: "input", width: "45%" },
{ label: "手机号", prop: "rySjhm", type: "input", width: "45%" },
{ label: "同步上传", prop: "qtTbsc", type: "switch" },
{ label: "车牌号", prop: "clCph", type: "input", width: "45%" },
{ label: "车架号", prop: "clCjh", type: "input", width: "45%" },
{ label: "特许证号", prop: "qtTxzh", type: "input", width: "45%" },
{
label: "布控类型",
prop: "bkLx",
type: "radio",
width: "45%",
options: D_GS_BK_LX
},
{ label: "照片", prop: "fjZp", type: "upload" },
{ label: "人员标签", prop: "rybqList", type: "slot", width: "100%" } // 使用插槽自定义
]);
// 表单验证规则
// const rulesModel = {
// ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
// ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
// rySfzh: [
// { required: true, message: "请输入身份证号", trigger: "blur" },
// {
// pattern: /^\d{17}[\dXx]$/,
// message: "身份证号格式不正确",
// trigger: "blur"
// }
// ],
// rySjhm: [
// { required: true, message: "请输入手机号", trigger: "blur" },
// { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
// ]
// };
const tableDate = reactive({
yjbqList: [], //表格数据
rybqList: [], //内置表格数据
keyCount: 0,
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
total: 0,
tableHeight: 225,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 90, //操作栏宽度
tableColumn: [
{ label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
{ label: "标签代码", prop: "bqDm" },
{ label: "标签等级", prop: "bqDj", showSolt: true },
{ label: "标签颜色", prop: "bqYs", showSolt: true }
]
});
const editFormRef = ref(null);
const currentEditIndex = ref(null);
const pageData = reactive({
tableData: [], //表格数据
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false,
size: "small",
border: false
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 220, //操作栏宽度
tableColumn: [
{ label: "照片", prop: "fjZp", showSolt: true },
{ label: "姓名", prop: "ryXm" },
{ label: "性别", prop: "ryXb", showSolt: true },
{ label: "身份证号", prop: "rySfzh" },
{ label: "户籍地", prop: "ryHjd" },
{ label: "现居住地", prop: "ryXjd" },
{ label: "手机号", prop: "rySjhm" },
{ label: "同步上传", prop: "qtTbsc", showSolt: true },
{ label: "车牌号", prop: "clCph" },
{ label: "车架号", prop: "clCjh" },
{ label: "特许证号", prop: "qtTxzh" },
{ label: "布控类型", prop: "bkLx", showSolt: true },
{ label: "人员标签", prop: "" }
]
});
const formData = ref([
{
label: "布控标题",
prop: "bkBt",
type: "input"
},
{
label: "所属警种",
prop: "bkSsjz",
type: "select",
options: D_GS_BK_SSJZ
},
{
label: "布控对象",
prop: "bkDx",
type: "select",
options: D_GS_BK_DX
},
{ label: "预警标签模型", prop: "yjbqList", type: "slot", width: "80%" }
]);
// const rules = reactive({
// bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
// bkObj: [{ required: true, message: "请选择布控对象", trigger: "blur" }],
// yjbqList: [
// { required: true, message: "请选择预警标签模型", trigger: "change" }
// ]
// });
// 2. 暴露获取数据的方法
const getFormData = () => {
// 可以在这里添加验证逻辑
return {
formData: listQuery.value
};
};
// 打开弹窗
const openDialog = (type) => {
chooseShow.value = true;
chooseType.value = type;
chooseTitle.value = type == "01" ? "请选择预警标签模型" : "请选择人员标签";
roleIds.value =
type == "01"
? tableDate.yjbqList.map((item) => item.id)
: tableDate.rybqList.map((item) => item.id);
};
const handleAdd = () => {
dialogFormVisible.value = true;
dialogTitle.value = "新增信息";
};
// 选择数据
const chooseDate = (data) => {
if (chooseType.value == "01") {
tableDate.yjbqList = data;
listQuery.value.yjbqList = tableDate.yjbqList.map((item) => item.id);
} else {
tableDate.rybqList = data;
listQuery.value.rybqList = tableDate.rybqList.map((item) => item.id);
}
};
const submitForm = () => {
// 正确调用子组件的submit方法
formRef.value.submit(
// 成功回调
(validData) => {
// 处理编辑情况
if (dialogTitle.value === "编辑信息") {
// 确保 currentEditIndex 有效
if (
currentEditIndex.value >= 0 &&
currentEditIndex.value < pageData.tableData.length
) {
pageData.tableData[currentEditIndex.value] = {
...pageData.tableData[currentEditIndex.value],
ryXm: validData.ryXm,
ryXb: validData.ryXb,
rySfzh: validData.rySfzh,
ryHjd: validData.ryHjd,
ryXjd: validData.ryXjd,
rySjhm: validData.rySjhm,
qtTbsc: validData.qtTbsc,
clCph: validData.clCph,
clCjh: validData.clCjh,
qtTxzh: validData.qtTxzh,
bkLx: validData.bkLx,
fjZp: validData.fjZp
};
} else {
console.error("无效的编辑索引:", currentEditIndex.value);
}
}
// 处理新增情况
else {
// 根据 chooseType 处理不同类型的布控
if (chooseType.value === "01") {
// 预警标签类型
const newItem = {
...validData,
yjbqList: tableDate.yjbqList.map((item) => item.id)
};
pageData.tableData.push(newItem);
} else {
// 人员标签类型
const newItem = {
...validData,
rybqList: tableDate.rybqList.map((item) => item.id)
};
pageData.tableData.push(newItem);
}
}
//赋值子组件数据传递给父组件
listQuery.value.bkdxList = pageData.tableData;
// 关闭弹窗并重置表单
dialogFormVisible.value = false;
},
// 错误回调(可选)
(errors) => {
console.error("表单验证失败:", errors);
ElMessage.error("请检查表单填写是否正确");
}
);
};
// 接收父组件传入的数据并回显
const setFormData = (data) => {
tableDate.yjbqList = data.yjbqList ?? [];
listQuery.value = {
...data // 假设 data 包含所有需要的字段
};
pageData.tableData = data.bkdxList;
console.log(listQuery.value);
};
// 打开编辑弹窗
const editData = (rowData) => {
// 找到当前行在tableData中的索引
currentEditIndex.value = pageData.tableData.findIndex(
(item) => item.rySfzh === rowData.rySfzh // 使用身份证号作为唯一标识
);
// 1. 使用解构提取原始值(避免响应式代理)
const rawData = { ...rowData }; // 浅拷贝解除响应式
// 2. 手动指定需要更新的字段
const safeUpdate = {
ryXm: rowData.ryXm, // 姓名
ryXb: rowData.ryXb, // 性别
rySfzh: rowData.rySfzh, // 身份证号
ryHjd: rowData.ryHjd, // 户籍地
ryXjd: rowData.ryXjd, // 现居住地
rySjhm: rowData.rySjhm, // 手机号
qtTbsc: rowData.qtTbsc, // 同步上传
clCph: rowData.clCph, // 车牌号
clCjh: rowData.clCjh, // 车号
qtTxzh: rowData.qtTxzh, // 特许证号
bkLx: rowData.bkLx, // 布控类型
bkLx: rowData.bkLx, // 人员标签
fjZp: rowData.fjZp // 照片
};
// 3. 一次性赋值
formForData.value = safeUpdate;
// 4. 延迟打开弹窗
nextTick(() => {
dialogFormVisible.value = true;
dialogTitle.value = "编辑信息";
});
};
// 根据索引删除数据
const deleteData = (index) => {
pageData.tableData.splice(index, 1);
};
// 删除
const delDictItem = (id, type) => {
switch (type) {
case "人员标签":
tableDate.rybqList = tableDate.rybqList.filter((item) => item.id !== id);
listQuery.value.rybqList = tableDate.rybqList.map((item) => item.id);
break;
case "预警标签":
tableDate.yjbqList = tableDate.yjbqList.filter((item) => item.id !== id);
listQuery.value.yjbqList = tableDate.yjbqList.map((item) => item.id);
break;
}
};
// 根据id查询详情
// 选择
const chooseData = () => {};
// 3. 暴露方法给父组件
defineExpose({
getFormData,
setFormData
});
</script>
<style lang="scss" scoped>
// .demo-form-inline .el-input {
// --el-input-width: 220px;
// }
// .demo-form-inline .el-select {
// --el-select-width: 220px;
// }
.info-container {
.btns {
margin-bottom: 10px;
}
}
.boxlist {
width: 99%;
height: 225px;
margin-top: 10px;
overflow: hidden;
}
</style>

View File

@ -1,215 +0,0 @@
<template>
<el-dialog
:title="titleValue"
width="900px"
:model-value="modelValue"
append-to-body
@close="closed"
>
<div>
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
<el-form-item label="集合名称">
<el-input
placeholder="请输入集合名称"
v-model="listQuery.jhMc"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleFilter">查询</el-button>
<el-button type="info" @click="reset()"> 重置 </el-button>
</el-form-item>
</el-form>
<div
class="tabBox"
:class="props.Single ? 'tabBoxRadio' : ''"
style="margin-top: 0px"
>
<el-table
v-loading="loading"
ref="multipleUserRef"
@selection-change="handleSelectionChange"
:data="tableData"
border
:row-key="keyid"
style="width: 100%"
height="450"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
/>
<el-table-column prop="jhMc" align="center" label="集合名称" />
<el-table-column prop="jhSm" align="center" label="集合说明" />
</el-table>
</div>
<div class="fenye" :style="{ top: tableHeight + 'px' }">
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="listQuery.current"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closed">取消</el-button>
<el-button type="primary" @click="onComfirm">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { defineProps, ref, onMounted } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const props = defineProps({
modelValue: {
type: Boolean,
required: true
},
dic: {
type: Object,
default: () => {}
},
bqDl: {
type: String,
default: "01"
},
bqLx: {
type: String,
default: "01"
},
titleValue: {
type: String,
default: "选择大类"
},
LeaderType: {
type: String,
default: ""
},
//是否单选
Single: {
type: Boolean,
default: true
},
roleIds: {
type: Array,
default: []
}
});
const total = ref(0);
const listQuery = ref({
current: 1,
size: 20
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
onMounted(() => {
handleFilter();
});
const closed = () => {
emits("update:modelValue", false);
};
const reset = () => {
listQuery.value = { current: 1, size: 20 };
getDataList();
};
const keyid = (row) => {
return row.id;
};
// 为用户分配角色
const onComfirm = () => {
const userList = multipleSelectionUser.value;
let list = [];
let listId = [];
userList.forEach((val) => {
if (listId.indexOf(val.id) == -1) {
list.push(val);
listId.push(val.id);
}
});
emits("chooseDate", list);
let data = { type: props.LeaderType, userList: userList };
emits("chooseDateLeader", data);
closed();
};
/**
* pageSize 改变触发
*/
const handleSizeChange = (currentSize) => {
listQuery.value.size = currentSize;
getDataList();
};
/**
* 页码改变触发
*/
const handleCurrentChange = (currentPage) => {
listQuery.value.current = currentPage;
getDataList();
};
// 查询标签组合列表
const getDataList = () => {
const data = listQuery.value;
loading.value = true;
qcckGet(data, "/mosty-gsxt/tbGsxtGzyJh/selectPage").then((res) => {
tableData.value = res?.records;
total.value = Number(res.total);
loading.value = false;
multipleUser();
});
};
//列表回显
function multipleUser() {
tableData.value.forEach((item) => {
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
const handleFilter = () => {
listQuery.value.current = 1;
getDataList();
};
const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
if (props.Single) {
if (val.length > 1) {
let del_row = val.shift();
multipleUserRef.value.toggleRowSelection(del_row, false);
}
multipleSelectionUser.value = val;
} else {
multipleSelectionUser.value = val;
}
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>

View File

@ -5,36 +5,14 @@
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search
:searchArr="searchConfiger"
@submit="onSearch"
:key="pageData.keyCount"
/>
<Search :searchArr="searchConfiger" @submit="onSearch" />
</div>
<!-- 按钮组 -->
<div class="content">
<div class="flexcb btns">
<div>
<el-button type="primary" @click="sendControl">发起布控</el-button>
<el-button type="primary">导出</el-button>
<el-button type="danger">批量删除</el-button>
<el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
<el-button type="primary" icon="CirclePlus" @click="drawerModel"
>添加范围模型</el-button
>
<el-button type="primary" icon="CirclePlus" @click="personNum"
>涉及人数</el-button
>
</div>
<el-input
v-model="input2"
style="max-width: 300px"
placeholder="请输入关键字"
>
<template #append
><el-button type="primary" icon="Search"></el-button
></template>
</el-input>
<div class="btns">
<el-button type="primary" @click="sendControl">发起布控</el-button>
<el-button type="primary">导出</el-button>
<el-button type="danger">批量删除</el-button>
</div>
<!-- 表格 -->
<div class="tabBox">
@ -47,43 +25,11 @@
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<template #bkDj="{ row }">
<DictTag :tag="false" :value="row.bkDj" :options="D_GS_BK_DJ" />
</template>
<template #bkDx="{ row }">
<DictTag :tag="false" :value="row.bkDx" :options="D_GS_BK_DX" />
</template>
<template #bkZt="{ row }">
<DictTag :tag="false" :value="row.bkZt" :options="D_GS_BK_ZT" />
</template>
<template #czYq="{ row }">
<DictTag :tag="false" :value="row.czYq" :options="D_GS_BK_CZYQ" />
</template>
<template #czJsdwdm="{ row }">
<div>
{{
deptList.find((item) => item.id == row.czJsdwdm)?.label ||
"未知单位"
}}
</div>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-button
v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
size="small"
@click="editControl('edit', row)"
>编辑</el-button
>
<el-button
v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
size="small"
@click="openDetail(row)"
>送审</el-button
>
<el-button size="small" @click="info('detail', row)"
>详情</el-button
>
<el-link type="primary" size="small" @click="handleRow('edit', row)">编辑</el-link>
<el-link type="primary" size="small">续控</el-link>
<el-link type="danger" size="small" @click="handleRow('delete', row)">删除</el-link>
</template>
</MyTable>
<Pages
@ -96,76 +42,29 @@
}"
></Pages>
</div>
<el-dialog
v-model="dialogVisible"
title="发起送审"
width="500px"
:before-close="handleClose"
>
<span>是否要发起送审</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="autoEdit()"> 确定 </el-button>
</div>
</template>
</el-dialog>
</div>
<!-- 详情 -->
<MyControlInfo ref="myControlInfoRef" />
<!-- 发起布控 -->
<SendControl ref="sendControlRef"></SendControl>
<PersonNum ref="personNumRef"></PersonNum>
<!-- 侧边栏 -->
<DrawerAreaModel ref="drawerModelRef"></DrawerAreaModel>
</div>
<!-- 布控对象 -->
<AddBkdx ref="addBkdxForm" />
</template>
<script setup>
import AddBkdx from "./components/addBkdx.vue";
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 MyControlInfo from "../MyControlInfo/components/sendControl.vue";
import SendControl from "./components/sendControl.vue";
import PersonNum from "./components/personNum.vue";
import DrawerAreaModel from "./components/drawerAreaModel.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { selectUserDeptPage } from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const {
D_GS_BK_DJ,
D_GS_BK_DX,
D_GS_BK_ZT,
D_GS_BK_SJLX,
D_GS_BK_CZYQ,
D_GS_BK_CZJSDWLX
} = proxy.$dict(
"D_GS_BK_DJ",
"D_GS_BK_DX",
"D_GS_BK_ZT",
"D_GS_BK_SJLX",
"D_GS_BK_CZYQ",
"D_GS_BK_CZJSDWLX"
); //获取字典数据
const deptList = ref([]); //部门列表
const detailDiloag = ref();
const dialogVisible = ref(false);
const { D_GS_BK_DJ, D_GS_BK_DX, D_GS_BK_ZT } = proxy.$dict("D_GS_BK_DJ","D_GS_BK_DX","D_GS_BK_ZT"); //获取字典数据
const addBkdxForm = ref(null); //布控对象组件
const searchBox = ref(); //搜索框
const sendControlRef = ref();
const personNumRef = ref();
const autoId = ref();
const myControlInfoRef = ref(null);
const searchConfiger = ref([
{
label: "布控级",
prop: "bqDj",
placeholder: "请选择布控级",
label: "布控级",
prop: "bqjb",
placeholder: "请选择布控级",
showType: "select",
options: D_GS_BK_DJ
},
@ -184,57 +83,31 @@ const searchConfiger = ref([
options: D_GS_BK_ZT
},
{
label: "布控时间类型",
prop: "bkSjLx",
label: "布控时间",
prop: "bksj",
placeholder: "请选择布控时间",
showType: "date",
options: D_GS_BK_SJLX
},
{
label: "预计标签模型",
prop: "jyzt",
placeholder: "请选预计标签模型",
showType: "select",
options: [{ label: "在业", value: "在业" }]
showType: "date"
},
{
label: "最近预警时间",
prop: "checkDate",
prop: "zjyjsj",
placeholder: "最近预警时间",
showType: "date"
},
{
label: "布控对象信息",
prop: "jyzt",
placeholder: "请选择布控对象信息",
showType: "select",
options: [{ label: "在业", value: "在业" }]
},
{
label: "处理接受部门",
prop: "jyzt",
placeholder: "请选择经营状况",
showType: "select",
options: [{ label: "在业", value: "在业" }]
label: "处置接受部门",
prop: "ssbmdm",
placeholder: "请选择处置接受部门",
showType: "department"
}
]);
const drawerModelRef = ref();
const queryFrom = ref({});
const pageData = reactive({
tableData: [
{
name: "1",
ssxq: "1",
cyxm: "1",
qqksrxm: "1",
qqksrsfzh: "1",
jzrxm: "1"
}
], //表格数据
tableData: [], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
showSelectType: "checkBox", //选择类型
loading: false
},
total: 0,
@ -242,52 +115,33 @@ const pageData = reactive({
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: "240", //操作栏宽度
controlsWidth: 150, //操作栏宽度
tableColumn: [
{ label: "布控级别", prop: "bkDj", showSolt: true },
{ label: "布控标题", prop: "bkBt" },
// { label: "布控对象", prop: "bkDx", showSolt: true },
// { label: "布控对象信息", prop: "bkDxxx" },
// { label: "预警标签模型", prop: "yjbqmx" },
// { label: "布控范围", prop: "bkfw" },
// { label: "预警信息", prop: "yjxx" },
{ label: "处置接收单位", prop: "czJsdwdm", showSolt: true },
{ label: "处置要求", prop: "czYq", showSolt: true },
{ label: "开始时间", prop: "bkSjKs" },
{ label: "结束时间", prop: "bkSjJs" },
// { label: "最近预警时间", prop: "zjyjsj" },
{ label: "失效时间", prop: "bkSjSx" },
{ label: "布控发起人", prop: "bkfqrXm" },
{ label: "布控状态", prop: "bkZt", showSolt: true }
{ label: "布控对象", prop: "bkBt" },
{ label: "布控对象信息", prop: "czJsdwdm", showSolt: true },
{ label: "预警标签模型", prop: "czYq", showSolt: true },
{ label: "布控范围", prop: "bkSjKs" },
{ label: "涉及人数", prop: "bkSjJs" },
{ label: "预警次数", prop: "bkSjSx" },
{ label: "处置接收单位", prop: "bkfqrXm" },
{ label: "开始时间", prop: "bkZt"},
{ label: "结束时间", prop: "bkZt"},
{ label: "最近预警时间", prop: "bkZt"},
{ label: "失效时间", prop: "bkZt"},
{ label: "布控发起人", prop: "bkZt"},
{ label: "审批状态", prop: "bkZt"},
{ label: "布控状态", prop: "bkZt"},
]
});
onMounted(() => {
getList();
tabHeightFn();
getdepartmentList();
});
// 获取部门列表
const getdepartmentList = () => {
selectUserDeptPage().then((res) => {
deptList.value = res?.records.map((item) => ({
label: item.deptName,
value: item.deptId
}));
});
};
const openDetail = (row) => {
autoId.value = row.id;
dialogVisible.value = true;
};
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList();
};
// 搜索
const onSearch = (val) => {
queryFrom.value = { ...val };
@ -306,63 +160,27 @@ const changeSize = (val) => {
// 获取列表
const getList = (val) => {
pageData.tableConfiger.loading = true;
let data = { ...pageData.pageConfiger, ...queryFrom.value };
let url = "/mosty-gsxt/tbGsxtBk/selectPage";
qcckGet(data, url)
.then((res) => {
console.log(res, "4");
pageData.tableData = res.records || [];
pageData.total = res.total;
pageData.tableConfiger.loading = false;
})
.catch(() => {
pageData.tableConfiger.loading = false;
});
// pageData.tableConfiger.loading = true;
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
// let url = "/mosty-gsxt/tbGsxtBk/selectPage";
// qcckGet(data, url)
// .then((res) => {
// console.log(res, "4");
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// })
// .catch(() => {
// pageData.tableConfiger.loading = false;
// });
};
// 详情
const info = (type, row) => {
myControlInfoRef.value.init(type, row);
};
//送审
const autoEdit = () => {
dialogVisible.value = false;
let url = `/mosty-gsxt/tbGsxtBk/subExamine/${autoId.value}`;
qcckPost({}, url)
.then((res) => {
ElMessage.success("提交成功");
getList();
})
.catch(() => {
ElMessage.error("提交失败");
});
};
// 发起
const sendControl = () => {
sendControlRef.value.init();
};
//编辑
// 发起
const editControl = (type, row) => {
sendControlRef.value.init(type, row);
};
// 涉及人数
const personNum = () => {
personNumRef.value.init();
};
// 添加范围模型
// 侧边栏
const drawerModel = () => {
drawerModelRef.value.init();
addBkdxForm.value.init();
};
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight =
window.innerHeight - searchBox.value.offsetHeight - 292;
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 292;
window.onresize = function () {
tabHeightFn();
};