283 lines
11 KiB
Vue
283 lines
11 KiB
Vue
|
<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>支持png、jpg、pdf文件上传</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>
|