更新页面

This commit is contained in:
2025-07-05 12:03:00 +08:00
parent ea13f83283
commit 38e04e095c
69 changed files with 994 additions and 10597 deletions

View File

@ -1,199 +1,102 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">情报信息流转{{ title }}</span>
<span class="title">{{ title }}情报信息流转</span>
<div>
<el-button size="small" @click="close">关闭</el-button>
<el-button type="primary" :loading="loading" @click="submit">保存</el-button>
<el-button @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-form :model="listQuery" :label-width="130" label-position="right">
<el-divider content-position="left">基础信息</el-divider>
<div class="form-row">
<el-form-item label="线索名称">
<el-input v-model="listQuery.xsmc" placeholder="请输入线索名称" />
</el-form-item>
<el-form-item label="线索来源">
<el-input v-model="listQuery.xsly" placeholder="请输入线索来源" />
</el-form-item>
<el-form-item label="线索编号">
<el-input v-model="listQuery.xsbh" placeholder="请输入线索编号" />
</el-form-item>
<el-form-item label="所属专题">
<el-input v-model="listQuery.xszt" placeholder="请输入所属专题" />
</el-form-item>
<!-- <el-form-item label="线索类型">
<el-select v-model="listQuery.xslx" placeholder="请选择线索类型">
<el-option label="类型1" value="1"/>
<el-option label="类型2" value="2"/>
</el-select>
</el-form-item>
<el-form-item label="线索等级">
<el-select v-model="listQuery.xsdj" placeholder="请选择线索等级">
<el-option label="一级" value="1"/>
<el-option label="二级" value="2"/>
</el-select>
</el-form-item> -->
<div class="form_cnt">
<FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
<template #gapdive>
<div style="width: 100%;height: 10px;" class="mb20">
<el-divider content-position="left">基础信息</el-divider>
</div>
</template>
<template #gapline>
<div style="width: 100%;height: 10px;" class="mb20">
<el-divider content-position="left">线索内容</el-divider>
</div>
</template>
<template #scfj>
<div style="width: 100%;padding-left: 50px;">
<div>上传附件:<span class="f12">可附电子表格Word文档图像音视频文件</span> </div>
<div><MOSTY.Upload :showBtn="true" :limit="10" v-model="listQuery.tps" /> </div>
</div>
</template>
</FormMessage>
<el-divider content-position="left"><span class="mr20">相关人员</span> <el-button type="primary" size="small" @click="addEdit('add',null)">添加人员</el-button></el-divider>
<MyTable
:tableData="pageForm.tableData"
:tableColumn="pageForm.tableColumn"
:tableHeight="pageForm.tableHeight"
:key="pageForm.keyCount"
:tableConfiger="pageForm.tableConfiger"
:controlsWidth="pageForm.controlsWidth"
@chooseData="chooseData"
>
<template #xb="{row}">
<DictTag :value="row.xb" :tag="false" :options="props.dic.D_BZ_XB" />
</template>
<template #bqList="{row}">
<div v-if="row.bqList">
<el-tag type="success" v-for="(it,idx) in row.bqList" :key="idx">{{ it.bqMc }}</el-tag >
</div>
<el-divider content-position="left">线索描述</el-divider>
<div class="form-row">
<el-form-item label="线索内容" class="full-width">
<el-input
type="textarea"
v-model="listQuery.xsnr"
:rows="4"
placeholder="请输入线索内容"
/>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="线索标签大类">
<el-select
v-model="listQuery.bqdl"
placeholder="请选择线索标签大类"
>
<el-option label="类型1" value="1" />
<el-option label="类型2" value="2" />
</el-select>
</el-form-item>
<el-form-item label="线索标签细类">
<el-select
v-model="listQuery.bqxl"
placeholder="请选择线索标签细类"
>
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
</el-select>
</el-form-item>
<el-form-item label="线索标签二级系类">
<el-select
v-model="listQuery.bqxl"
placeholder="请选择线索标签二级系类"
>
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
</el-select>
</el-form-item>
<el-form-item label="线索来源">
<el-select v-model="listQuery.xsly" placeholder="请选择线线索来源">
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
</el-select>
</el-form-item>
</div>
<div class="form-row">
<el-form-item label="线索风险等级">
<el-select
v-model="listQuery.xsfxdj"
placeholder="请选择线索风险等级"
>
<el-option label="类型1" value="1" />
<el-option label="类型2" value="2" />
</el-select>
</el-form-item>
<el-form-item label="线索备注">
<el-input v-model="listQuery.xsbz" placeholder="请输入线索备注" />
</el-form-item>
<el-form-item label="市内外">
<el-input v-model="listQuery.snw" placeholder="请输入市内外" />
</el-form-item>
<el-form-item label="是否涉及外地">
<el-select
v-model="listQuery.fxdj"
placeholder="请选择线索风险等级"
>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="指向地点">
<el-select v-model="listQuery.zxdd" placeholder="请选择指向地点">
<el-option label="一级" value="1" />
<el-option label="二级" value="2" />
</el-select>
</el-form-item>
</div>
<el-divider content-position="left">相关人员</el-divider>
<div class="mt10 mb10">
<el-button type="primary" size="small">添加人员</el-button>
</div>
<div class="form-row">
<MyTable
:tableData="pageForm.tableData"
:tableColumn="pageForm.tableColumn"
:tableHeight="pageForm.tableHeight"
:key="pageForm.keyCount"
:tableConfiger="pageForm.tableConfiger"
:controlsWidth="pageForm.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-link
size="small"
type="primary"
@click="addEdit('detail', row)"
>详情</el-link
>
<el-link size="small" type="success" @click="addEdit('edit', row)"
>编辑</el-link
>
<el-link size="small" type="danger" @click="deleteRow(row)"
>删除</el-link
>
</template>
</MyTable>
</div>
<el-divider content-position="left">申请人</el-divider>
<div class="form-row">
<el-form-item label="申请单位">
<el-input v-model="listQuery.sqdw" placeholder="请输入申请单位" />
</el-form-item>
<el-form-item label="申请人">
<el-input v-model="listQuery.sqr" placeholder="请输入申请人" />
</el-form-item>
<el-form-item label="审核单位">
<el-input v-model="listQuery.shdw" placeholder="请输入审核单位" />
</el-form-item>
<el-form-item label="审核人">
<el-input v-model="listQuery.shr" placeholder="请输入审核人" />
</el-form-item>
<el-form-item label="审批单位">
<el-input v-model="listQuery.spdw" placeholder="请输入审批单位" />
</el-form-item>
<el-form-item label="审批人">
<el-input v-model="listQuery.spr" placeholder="请输入审批人" />
</el-form-item>
</div>
</el-form>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
</template>
</MyTable>
</div>
<!-- 人员 -->
<AddPeo ref="showAdd" :dic="props.dic" :title="peoTitle" @change="getPeo"></AddPeo>
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import AddPeo from './addPeo.vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref,reactive } from "vue";
const dialogForm = ref(false);
const title = ref("");
const listQuery = ref({
xgry: []
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
dic: Object
});
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const rules = reactive({
xsMc: [{ required: true, message: "请输入线索名称", trigger: "blur" }],
xlLx: [{ required: true, message: "请选择线索类型", trigger: "change" }],
qbLy: [{ required: true, message: "请选择情报来源", trigger: "change" }],
});
const formData = ref([
{ prop: "gapdive", type: "slot",width:'100%' },
{ label: "线索名称", prop: "xsMc", type: "input" },
{ label: "线索类型", prop: "xlLx", type: "select", options:props.dic.D_GS_XS_LX },
{ label: "情报来源", prop: "qbLy", type: "select", options:props.dic.D_GS_XS_LY},
{ label: "指向开始时间", prop: "zxkssj", type: "datetime"},
{ label: "指向结束时间", prop: "zxjssj", type: "datetime"},
{ label: "指向地点", prop: "zxdz", type: "input"},
{ label: "所属专题", prop: "sszt", type: "select",options:props.dic.D_BZ_SSZT},
{ prop: "gapline", type: "slot",width:'100%' },
{ prop: "scfj", type: "slot",width:'100%'},
{ label: "线索内容", prop: "xs_nr", type: "textarea",width:'100%'},
{ label: "群体类型", prop: "qtlx", type: "select",options:props.dic.D_GS_XS_QTLX },
{ label: "群体名称", prop: "qtmc", type: "input"},
{ label: "涉及人数", prop: "sjrs", type: "inputNumber"},
{ label: "线索报送单位", prop: "xsbsdwdm", type: "department"},
]);
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
const pageForm = reactive({
tableData: [
{
xm: "张三",
xb: "男",
sfzh: "51018319969699999",
hjd: "",
hjdpcs: "",
bq: "重点人员"
}
],
tableData: [],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
@ -203,81 +106,103 @@ const pageForm = reactive({
controlsWidth: 220,
tableColumn: [
{ label: "姓名", prop: "xm" },
{ label: "性别", prop: "xb" },
{ label: "性别", prop: "xb",showSolt:true },
{ label: "身份证号", prop: "sfzh" },
{ label: "户籍地", prop: "hjd" },
{ label: "户籍地", prop: "hjdz" },
{ label: "户籍地派出所", prop: "hjdpcs" },
{ label: "标签", prop: "bq" }
{ label: "标签", prop: "bqList",showSolt:true }
]
});
const showAdd = ref()
onMounted(()=>{
tabHeightFn()
})
// 初始化数据
const init = (type, row) => {
tabHeightFn()
dialogForm.value = true;
title.value = type === "add" ? "新增" : "编辑";
if (type === "edit" && row) {
listQuery.value = { ...row };
} else {
listQuery.value = {
xgry: []
};
}
title.value = type == "add" ? "新增" : type == "info" ? "详情" : "编辑";
// 初始化表单数据,并根据详情页设置禁用状态
// if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
// qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/" + id).then((res) => {
// listQuery.value = res;
// });
};
const close = () => {
dialogForm.value = false;
};
// 打开弹窗
const addEdit = (type,row) =>{
showAdd.value.init(type,row)
}
const handleAdd = () => {
listQuery.value.xgry.push({
xm: "",
zjhm: "",
lxdh: ""
// 新增人员
const getPeo = (val) =>{
pageForm.tableData.push(val);
}
// 提交
const submit = () => {
elform.value.submit((data) => {
let url = title.value == "新增" ? "/mosty-gsxt/qbcj/add" : "/mosty-gsxt/qbcj/update";
let params = { ...data ,ryList:pageForm.tableData};
loading.value = true;
qcckPost(params, url).then((res) => {
loading.value = false;
proxy.$message({ type: "success", message: title.value + "成功" });
emit("change");
close();
}).catch(() => {
loading.value = false;
});
});
};
const handleDelete = (index) => {
listQuery.value.xgry.splice(index, 1);
// 关闭
const close = () => {
listQuery.value = {};
dialogForm.value = false;
loading.value = false;
};
// 表格高度计算
const tabHeightFn = () => {
pageForm.tableHeight = window.innerHeight - 720;
window.onresize = function () {
tabHeightFn();
};
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
color: #0072ff;
background: rgba(0, 114, 255, 0.3);
}
.boxlist {
width: 99%;
height: 225px;
margin-top: 10px;
overflow: hidden;
}
.head_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cntinfo {
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
::v-deep .avatar-uploader{
display: flex;
align-items: center;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
.el-form-item {
flex: 1;
min-width: 300px;
margin-right: 20px;
&.full-width {
flex: 0 0 100%;
}
}
}
:deep(.el-divider__text) {
font-size: 16px;
font-weight: bold;
}
::v-deep .el-upload-list{
margin-left: 20px;
display: flex;
align-items: center;
}
::v-deep .el-upload-list__item-name .el-icon{
top: 3px;
}
</style>

View File

@ -0,0 +1,107 @@
<template>
<el-dialog v-model="showDialog" :destroy-on-close="true" :title="props.title" @close="close" :close-on-click-modal="false">
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
<template #bqList>
<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 } from 'vue';
const props = defineProps({
dic:{
type:Object,
default:{}
},
title:{
type:String,
default:'新增人员'
}
})
const chooseMarksVisible = ref(false)
const roleIds = ref([])
const elform = ref()
const showDialog = ref(false)
const emit = defineEmits(['change'])
const listQuery = ref({})
const formData = ref([
{ label: "姓名", prop: "xm", type: "input" ,width:'48%'},
{ label: "性别", prop: "xb", type: "select",options:props.dic.D_BZ_XB ,width:'48%'},
{ label: "身份证号", prop: "sfzh", type: "input" ,width:'48%'},
{ label: "户籍地", prop: "hjdz", type: "input",width:'48%' },
{ label: "户籍地派出所", prop: "hjdpcs", type: "department" ,width:'48%'},
{ label: "标签", prop: "bqList", type: "slot",width:'100%' },
{ label: "是否挑头人", prop: "sfttr", type: "select",options:props.dic.D_BZ_SF ,width:'48%'},
{ label: "是否响应人", prop: "sfxyr", type: "select" ,options:props.dic.D_BZ_SF,width:'48%' },
{ label: "所属群体", prop: "ssqt", type: "input" ,width:'48%'},
{ label: "微信号", prop: "wx", type: "input" ,width:'48%'},
{ label: "QQ", prop: "qq", type: "input" ,width:'48%'},
])
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 init = (type,row) =>{
showDialog.value = true;
elform.value.reset();
if(row) listQuery.value = {...row};
}
// 选择标签
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,12 +1,16 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="情报信息流转">
<PageTitle title="情报信息采集">
<el-button type="primary">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">导出</span>
</el-button>
<el-button type="primary" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="danger" @click="addEdit('add', '')">
<el-button type="danger">
<el-icon style="vertical-align: middle"><Dete /></el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
@ -26,12 +30,22 @@
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData">
<template #xlLx="row">
<DictTag :tag="false" :value="row.xlLx" :options="D_GS_XS_LX" />
</template>
<template #qbLy="row">
<DictTag :tag="false" :value="row.qbLy" :options="D_GS_XS_LY" />
</template>
<template #shzt="row">
<DictTag :tag="false" :value="row.shzt" :options="D_BZ_XSSHZT" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
<el-link size="small" type="primary" @click="addEdit('detail', row)">审核</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
<el-link size="small" type="warning" @click="transferClue(row)">续报</el-link>
<!-- 续报 == 编辑 -->
<el-link size="small" type="warning" @click="transferClue(row)">续报</el-link>
</template>
</MyTable>
<Pages
@ -44,8 +58,8 @@
}"
></Pages>
</div>
<!-- 详情 -->
<DetailForm ref="detailDiloag" />
<!-- 新增 -->
<AddForm ref="detailDiloag" @change="change" v-if="isShow" :dic="{D_BZ_SF,D_BZ_XB,D_GS_XS_LY,D_BZ_SSZT,D_GS_XS_LX ,D_GS_XS_QTLX}" />
</div>
</template>
@ -54,61 +68,27 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import DetailForm from "./components/addForm.vue";
import AddForm from "./components/addForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const {D_GS_XS_LY, D_BZ_SSZT,D_BZ_SF,D_GS_XS_LX ,D_GS_XS_QTLX,D_BZ_XB,D_BZ_XSSHZT} = proxy.$dict("D_GS_XS_LY","D_BZ_SSZT","D_BZ_SF","D_GS_XS_LX","D_GS_XS_QTLX","D_BZ_XB","D_BZ_XSSHZT"); //获取字典数据
const detailDiloag = ref();
const searchBox = ref(); //搜索框
const isShow = ref(false)
const searchConfiger = ref([
{ label: "线索名称", prop: 'clueTitle', placeholder: "请输入线索名称", showType: "input" },
{ label: "语义关键字", prop: 'semanticKeywords', placeholder: "请输入语义关键字", showType: "input" },
{ label: "线索类型", prop: 'clueType', placeholder: "请选择线索类型", showType: "select" },
{ label: "线索来源", prop: 'clueSource', placeholder: "请选择线索来源", showType: "select" },
{ label: "线索名称", prop: 'xsMc', placeholder: "请输入线索名称", showType: "input" },
{ label: "内容关键字", prop: 'xsNr', placeholder: "请输入语义关键字", showType: "input" },
{ label: "线索类型", prop: 'xlLx', placeholder: "请选择线索类型", showType: "select" },
{ label: "线索来源", prop: 'qbLy', placeholder: "请选择线索来源", showType: "select" },
{ label: "线索状态", prop: 'xszt', placeholder: "请选择线索状态", showType: "select" },
{ label: "处置状态", prop: 'czzt', placeholder: "请选择处置状态", showType: "select" },
{ label: "开始时间", prop: 'startTime', placeholder: "请选择开始时间", showType: "date" },
{ label: "结束时间", prop: 'endTime', placeholder: "请选择结束时间", showType: "date" },
{ label: "指向地点", prop: 'targetLocation', placeholder: "请输入指向地点", showType: "input" },
{ label: "开始时间", prop: 'zxkssj', placeholder: "请选择开始时间", showType: "date" },
{ label: "结束时间", prop: 'zxjssj', placeholder: "请选择结束时间", showType: "date" },
{ label: "指向地点", prop: 'zxdz', placeholder: "请输入指向地点", showType: "input" },
]);
const pageData = reactive({
tableData: [
{
clueNo: "XS20240101001",
clueTitle: "可疑人员活动线索",
clueType: "人员线索",
clueSource: "群众举报",
startTime: "2024-01-01 08:00:00",
endTime: "2024-01-01 18:00:00",
targetLocation: "某市某区某街道",
clueContent: "发现多名可疑人员在该区域频繁出入,疑似从事非法活动。",
attachment: "report.pdf"
},
{
clueNo: "XS20240101002",
clueTitle: "涉毒交易线索",
clueType: "违法犯罪线索",
clueSource: "技术侦查",
startTime: "2024-01-02 10:00:00",
endTime: "2024-01-02 16:00:00",
targetLocation: "某市某区某小区",
clueContent: "监控发现多次可疑交易活动,疑似涉及违禁物品。",
attachment: "evidence.docx"
},
{
clueNo: "XS20240101003",
clueTitle: "非法聚集线索",
clueType: "群体性事件",
clueSource: "网络监控",
startTime: "2024-01-03 14:00:00",
endTime: "2024-01-03 22:00:00",
targetLocation: "某市某广场",
clueContent: "网络平台发现有组织策划非法聚集活动的信息。",
attachment: "online_evidence.zip"
}
],
tableData: [],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
@ -122,15 +102,17 @@ const pageData = reactive({
},
controlsWidth: 220,
tableColumn: [
{ label: "线索编号", prop: "clueNo" },
{ label: "线索名称", prop: "clueTitle" },
{ label: "线索类型", prop: "clueType" },
{ label: "线索来源", prop: "clueSource" },
{ label: "开始时间", prop: "startTime" },
{ label: "结束时间", prop: "endTime" },
{ label: "指向地点", prop: "targetLocation" },
{ label: "线索内容", prop: "clueContent", width: 200 },
{ label: "附件", prop: "attachment", slot: true },
{ label: "线索编号", prop: "xsBh" },
{ label: "线索名称", prop: "xsMc" },
{ label: "线索类型", prop: "xlLx",showSolt:true },
{ label: "线索来源", prop: "qbLy",showSolt:true },
{ label: "开始时间", prop: "zxkssj" },
{ label: "结束时间", prop: "zxjssj" },
{ label: "指向地点", prop: "zxdz" },
{ label: "线索内容", prop: "xsNr"},
{ label: "处置状态", prop: "czzt"},
{ label: "附件", prop: "fjdz", showSolt: true },
{ label: "审核状态", prop: "shzt", showSolt: true },
]
});
@ -141,12 +123,6 @@ onMounted(() => {
tabHeightFn();
});
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList()
}
// 搜索
const onSearch = (val) =>{
queryFrom.value = {...val}
@ -164,20 +140,22 @@ const changeSize = (val) =>{
}
// 获取列表
const getList = (val) =>{
// pageData.tableConfiger.loading = true;
const getList = () =>{
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; })
qcckGet(data,'/mosty-gsxt/qbcj/selectPage').then(res=>{
pageData.tableData = res.records || [];
pageData.total = res.total;
pageData.tableConfiger.loading = false;
}).catch(()=>{ pageData.tableConfiger.loading = false; })
}
// 详情
const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
isShow.value = true;
setTimeout(()=>{
detailDiloag.value.init(type, row);
},500)
};
// 表格高度计算

View File

@ -1,506 +1,164 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">新增</span>
<span class="title">人力情报信息采集流转详情</span>
<div>
<el-button
type="primary"
size="small"
:loading="loading"
@click="submit"
>保存</el-button
>
<el-button size="small" @click="close">关闭</el-button>
<el-button @click="close">保存</el-button>
<el-button @click="close">暂存</el-button>
<el-button @click="close">关闭</el-button>
</div>
</div>
<div class="form_cnt">
<FormMessage
v-model="listQuery"
:formList="formData"
ref="elform"
:rules="rules"
>
<template #basic>
<el-divider content-position="left">基础信息</el-divider>
</template>
<template #sbRy>
<el-divider content-position="left">涉及人员</el-divider>
</template>
<template #jurisdiction>
<el-divider content-position="left">审批信息</el-divider>
</template>
<template #bqInfo>
<el-divider content-position="left">标签信息</el-divider>
</template>
<!-- 人员标签模型-->
<template #bqList>
<el-button @click="openDialog('01', 'bq')">选择</el-button>
<div class="boxlist">
<MyTable
:tableData="tableDate.bqList"
:tableColumn="tableDate.tableColumn"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #bqLb="{ row }">
<DictTag :value="row.bqLb" :tag="false" :options="D_GS_BQ_LB" />
</template>
<template #bqLx="{ row }">
<DictTag :value="row.bqLx" :tag="false" :options="D_GS_BQ_LX" />
</template>
<template #bqZl="{ row }">
<DictTag :value="row.bqZl" :tag="false" :options="D_GS_BQ_ZL" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.bqId)"
>删除</el-link
>
</template>
</MyTable>
<FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
<template #gapdive>
<div style="width: 100%;height: 10px;" class="mb20">
<el-divider content-position="left">基础信息</el-divider>
</div>
</template>
<!-- 上报人员-->
<template #sbRyId>
<el-button @click="openDialog('01', 'ry')">选择</el-button>
<div class="boxlist">
<MyTable
:tableData="tableDate.ryList"
:tableColumn="tableDate.tableColumnRy"
:tableHeight="tableDate.tableHeight"
:key="tableDate.keyCountRy"
:tableConfiger="tableDate.tableConfiger"
:controlsWidth="tableDate.controlsWidth"
>
<template #ryMz="{ row }">
<DictTag :tag="false" :value="row.ryMz" :options="D_BZ_MZ" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link
type="danger"
@click="delDict(row.id)"
v-if="typeOf == 'edit' || typeOf == 'add'"
>删除</el-link
>
</template>
</MyTable>
<template #gapline>
<div style="width: 100%;height: 10px;" class="mb20">
<el-divider content-position="left">线索内容</el-divider>
</div>
</template>
<!-- 管辖单位 -->
<template #gxSsbmdm>
<el-select
v-model="listQuery.gxSsbmdm"
placeholder="请选择管辖单位"
style="width: 240px"
@change="handleDeptChange('gxSsbmmc', $event)"
>
<el-option
v-for="item in deptList"
:key="item.value"
:label="item.label"
:value="item.value.toString()"
/>
</el-select>
</template>
<!-- 现住地派出所 -->
<template #xzdPcsdm>
<el-select
v-model="listQuery.xzdPcsdm"
placeholder="请选择现住地派出所"
style="width: 240px"
@change="handleDeptChange('xzdPcsmc', $event)"
>
<el-option
v-for="item in deptList"
:key="item.value"
:label="item.label"
:value="item.value.toString()"
/>
</el-select>
</template>
<!-- 线索正文 -->
<template #xsZw>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
mode="default"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
mode="default"
@onCreated="handleCreated"
/>
</div>
<template #scfj>
<div style="width: 100%;">上传附件: <el-button size="small" type="primary">上传附件</el-button> <span class="f12">可附电子表格Word文档图像音视频文件</span></div>
</template>
</FormMessage>
<!-- 列表弹窗 -->
<TagSelectorDialog
v-model="chooseShow"
ref="tagDialog"
@chooseDate="handleTagSelect"
:dic="{ D_GS_BQ_ZL, D_GS_BQ_LB, D_GS_BQ_LX }"
/>
<!-- 上报人员列表弹窗 -->
<DialogList
v-if="ryDialog"
:Single="true"
:roleIds="roleIds"
@chooseDate="chooseDate"
:titleValue="chooseTitle"
v-model="ryDialog"
bqDl="02"
:dic="{ D_BZ_MZ }"
></DialogList>
<el-divider content-position="left"><span class="mr20">相关人员</span> <el-button type="primary" size="small" @click="showPeo = true,peoTitle = '新增人员'">添加人员</el-button></el-divider>
<MyTable
:tableData="pageForm.tableData"
:tableColumn="pageForm.tableColumn"
:tableHeight="pageForm.tableHeight"
:key="pageForm.keyCount"
:tableConfiger="pageForm.tableConfiger"
:controlsWidth="pageForm.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link >
<el-link size="small" type="success" @click="addEdit('edit', row)">编辑</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
</template>
</MyTable>
</div>
<!-- 人员 -->
<AddPeo v-model="showPeo" :dic="props.dic" :title="peoTitle"></AddPeo>
</div>
</template>
<script setup>
import {
ref,
defineExpose,
reactive,
onMounted,
defineEmits,
getCurrentInstance,
nextTick,
shallowRef,
onBeforeUnmount,
watch
} from "vue";
import AddPeo from './addPeo.vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import TagSelectorDialog from "@/components/aboutTable/TagSelectorDialog.vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import DialogList from "./dialogList.vue";
import store from "@/store";
const { proxy } = getCurrentInstance();
const {
D_GS_BQ_LB,
D_GS_BQ_ZL,
D_GS_BQ_LX,
D_GS_XS_SBRYLX,
D_GS_ZDQT_LB,
D_GS_XS_FXDJ,
D_BZ_MZ,
D_GS_XS_LX,
D_GS_RLQB_BJSB_BSZT,
D_BZ_SF
} = proxy.$dict(
"D_GS_BQ_LB",
"D_GS_BQ_ZL",
"D_GS_BQ_LX",
"D_GS_XS_SBRYLX",
"D_GS_ZDQT_LB",
"D_GS_XS_FXDJ",
"D_BZ_MZ",
"D_GS_XS_LX",
"D_GS_RLQB_BJSB_BSZT",
"D_BZ_SF"
); //获取字典数据
const elform = ref();
const dialogForm = ref(false);
const chooseShow = ref(false); //选择弹窗
const tagDialog = ref();
const ryDialog = ref(false); //选择弹窗
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();
const editorConfig = ref({
placeholder: "请输入内容...",
readOnly: false,
MENU_CONF: {
// 图片上传配置
uploadImage: {
server: "http://your-server.com/api/upload-image", // 替换为你的图片上传接口
fieldName: "file", // 上传文件的字段名(根据后端接口调整)
maxFileSize: 10 * 1024 * 1024, // 10M
allowedFileTypes: ["image/*"], // 允许的图片类型
// 自定义上传参数(如 token
meta: {
token: store.getters.token // 如果需要认证
},
// 自定义文件名
metaWithUrl: false,
// 跨域携带 Cookie
withCredentials: true
},
// 视频上传配置(类似)
uploadVideo: {
server: "http://your-server.com/api/upload-video",
fieldName: "file",
maxFileSize: 50 * 1024 * 1024 // 50M
}
}
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, onMounted, defineEmits, getCurrentInstance, nextTick } from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
dic: Object
});
const toolbarConfig = {};
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const formData = ref([
{ label: "", prop: "gapdive", type: "slot",width:'100%' },
{ label: "线索编号", prop: "xsbh", type: "input",},
{ label: "线索名称", prop: "xsmc", type: "input" },
{ label: "线索类型", prop: "xslx", type: "select", options:props.dic.D_GS_XS_LX },
{ label: "情报来源", prop: "qbly", type: "select", options:props.dic.D_GS_XS_LY},
{ label: "指向开始时间", prop: "zxkssj", type: "datetime"},
{ label: "指向结束时间", prop: "zxjssj", type: "datetime"},
{ label: "指向地点", prop: "zxdz", type: "input"},
{ label: "所属专题", prop: "sszt", type: "select",options:props.dic.D_BZ_SSZT},
{ prop: "gapline", type: "slot",width:'100%' },
{ prop: "scfj", type: "slot",width:'100%'},
{ label: "线索内容", prop: "xsnr", type: "textarea",width:'100%'},
{ label: "群体类型", prop: "qtlx", type: "select",options:props.dic.D_GS_XS_QTLX },
{ label: "群体名称", prop: "qtmc", type: "input"},
{ label: "涉及人数", prop: "sjrs", type: "inputNumber"},
{ label: "线索报送单位", prop: "fjWb", type: "department"},
]);
const listQuery = ref({}); //表单
const loading = ref(false);
// 内容 HTML
const valueHtml = ref("<p>hello</p>");
const tableDate = reactive({
bqList: [], //表格数据
ryList: [], //上报人员列表
const elform = ref();
const title = ref("");
const pageForm = reactive({
tableData: [],
keyCount: 0,
rykeyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
showSelectType: "checkBox",
loading: false
},
total: 0,
tableHeight: 225,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 90, //操作栏宽度
controlsWidth: 220,
tableColumn: [
{ label: "标签代码", prop: "bqDm" },
{ label: "标签类别", prop: "bqLb", showSolt: true },
{ label: "标签类型", prop: "bqLx", showSolt: true },
{ label: "标签名称", prop: "bqMc" },
{ label: "标签种类", prop: "bqZl", showSolt: true }
],
tableColumnRy: [
{ label: "姓名", prop: "ryXm" },
{ label: "联系电话", prop: "ryLxdh" },
{ label: "身份证号", prop: "rySfzh" },
{ label: "民族", prop: "ryMz", showSolt: true },
{ label: "居住地址", prop: "jzdDz" }
{ label: "姓名", prop: "xm" },
{ label: "别", prop: "xb" },
{ label: "身份证号", prop: "sfzh" },
{ label: "户籍地", prop: "hjd" },
{ label: "户籍地派出所", prop: "hjdpcs" },
{ label: "标签", prop: "bq" }
]
});
const formData = ref([
{ label: "", prop: "basic", type: "slot", width: "100%" },
{ label: "线索名称", prop: "xsMc", type: "input" },
{ label: "线索来源", prop: "ryXb", type: "select" },
{ label: "线索编号", prop: "ryMz", type: "input" },
{ label: "线索类型", prop: "ryLxdh", type: "select" },
{ label: "线索状态", prop: "ryCsrq", type: "select" },
{ label: "所属专题", prop: "ryMz", type: "input" },
{ label: "群体名称", prop: "ryMz", type: "input" },
{ label: "群体类型", prop: "ryMz", type: "select" },
{ label: "上报单位", prop: "ryMz", type: "select" },
{ label: "上报时间", prop: "rySfzh", type: "date" },
{ label: "线索内容", prop: "xsZw", type: "slot", width: "100%" },
{ label: "线索备注", prop: "ryJg", type: "textarea", width: "100%" },
{ label: "", prop: "bqInfo", type: "slot", width: "100%" },
{ label: "标签列表", prop: "bqList", type: "slot", width: "80%" },
{
label: "市内外",
prop: "snw",
type: "radio",
options: [
{ value: "1", label: "市内" },
{ value: "0", label: "市外" }
]
},
{
label: "是否设计外地",
prop: "xsfxdj",
type: "radio",
options: [
{ value: "1", label: "是" },
{ value: "0", label: "否" }
]
},
{ label: "指向地点", prop: "zxdd", type: "input" },
{ label: "具体部位", prop: "jtbw", type: "input" },
{ label: "指向时间类型", prop: "sjlx", type: "select" },
{ label: "指向时间段", prop: "sjd", type: "datetimerange" },
{ label: "", prop: "sbRy", type: "slot", width: "100%" },
{
label: "上报人员",
prop: "sbRyId",
type: "slot",
width: "80%"
},
// {
// label: "姓名",
// prop: "zdrRyjb",
// type: "input"
// },
// {
// label: "身份证号",
// prop: "zdrYjdj",
// type: "input"
// },
// { label: "住址", prop: "hjdQh", type: "select" },
{ label: "", prop: "jurisdiction", type: "slot", width: "100%" },
const showPeo = ref(false)
const peoTitle = ref('')
onMounted(()=>{
tabHeightFn()
})
{ label: "申请人", prop: "hjdXz", type: "input" },
{
label: "申请时间",
prop: "hjdPcsdm",
type: "date"
},
{ label: "申请原因", prop: "xzdQh", type: "textarea", width: "100%" }
]);
const listQuery = ref({});
// 打开弹窗
const openDialog = (type, value) => {
nextTick(() => {
if (value == "ry") {
ryDialog.value = true;
} else if (value == "bq") {
chooseShow.value = true;
tagDialog.value.setValues(listQuery.value.bqList);
}
});
};
const handleTagSelect = (selectedTags) => {
tableDate.bqList = selectedTags.map((item) => ({
bqDm: item.bqDm || "",
bqId: item.bqId || "",
bqLb: item.bqLb || "",
bqLx: item.bqLx || "",
bqMc: item.bqMc || "",
bqZl: item.bqZl || ""
}));
listQuery.value.bqList = tableDate.bqList;
// 每个标签包含: bqDm, bqId, bqLb, bqLx, bqMc, bqZl 属性
};
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例,重要!
};
// 初始化数据
const init = (type, row) => {
tabHeightFn()
dialogForm.value = true;
// 根据type和row初始化表单数据
title.value = type == "add" ? "新增" : type == "info" ? "详情" : "编辑";
// 初始化表单数据,并根据详情页设置禁用状态
// if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
// qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/" + id).then((res) => {
// listQuery.value = res;
// });
};
const close = () => {
listQuery.value = {};
tableDate.bqList = [];
dialogForm.value = false;
loading.value = false;
};
// 提交
const submit = () => {
elform.value.submit((data) => {
// 定义仅在 report 模式下需要的字段
const reportFields = [
"bsBh",
"bsNr",
"bsRq",
"bsSfCb",
"bsZt",
"sbDwDm",
"sbDwMc",
"csDwMc",
"csDwDm",
"bzDwMc",
"bzDwDm",
"cbrXm",
"cbrSfzh",
"shrXm",
"shrSfzh",
"qfrXm",
"qfrSfzh",
"hbBk",
"xsId" // 新增 xsId
];
// 准备最终提交数据
let submitData;
if (typeOf.value === "report") {
// report 模式:只提交 reportFields 里的字段 + hbBk富文本
submitData = {
...Object.fromEntries(
Object.entries(data).filter(([key]) => reportFields.includes(key))
),
hbBk: valueHtml.value, // 强制覆盖富文本字段
xsId: listQuery.value.id // 强制添加 xsId
};
} else {
// 非 report 模式:提交除 reportFields 外的所有字段
submitData = {
...Object.fromEntries(
Object.entries(data).filter(([key]) => !reportFields.includes(key))
),
xsNr: clueHtml.value // 强制覆盖线索内容字段
};
}
// 根据 title 决定请求 URL
let url =
title.value == "新增"
? "/mosty-gsxt/tbGsxtXs/save"
: title.value == "上报"
? "/mosty-gsxt/tbGsxtRlqbBjsb/save"
: "/mosty-gsxt/tbGsxtXs/update";
// 发起请求
qcckPost(submitData, url)
.then((res) => {
proxy.$message({ type: "success", message: title.value + "成功" });
emit("getList");
close();
})
.catch(() => {});
let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtRqfjNr/save" : "/mosty-gsxt/tbGsxtRqfjNr/update";
let params = { ...data };
// qcckPost(params, url).then((res) => {
// proxy.$message({ type: "success", message: title.value + "成功" });
// emit("onSearch");
// close();
// })
// .catch(() => {});
});
};
// 根据id查询详情
const getDataRyId = (id) => {
qcckGet({}, "/mosty-gsxt/tbGsxtJwry/" + id).then((res) => {
tableDate.ryList = [res];
listQuery.value.sbRyId = res.id;
});
};
// 删除
const delDictItem = (bqId) => {
tableDate.bqList = tableDate.bqList.filter((item) => item.bqId !== bqId);
listQuery.value.bqList = tableDate.bqList;
};
// 删除
const delDict = (id) => {
tableDate.ryList = tableDate.ryList.filter((item) => item.id !== id);
listQuery.value.ryList = tableDate.ryList;
};
// 选择数据
const chooseDate = (data) => {
console.log(data[0].id);
tableDate.ryList = data;
listQuery.value.sbRyId = data[0].id;
// 关闭
const close = () => {
listQuery.value = {};
dialogForm.value = false;
loading.value = false;
};
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
// 表格高度计算
const tabHeightFn = () => {
pageForm.tableHeight = window.innerHeight - 720;
window.onresize = function () {
tabHeightFn();
};
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.dialog {
padding: 20px;
.head_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cntinfo {
height: calc(100% - 70px);
overflow: hidden;
overflow-y: auto;
}
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
color: #0072ff;
background: rgba(0, 114, 255, 0.3);
}
.boxlist {
width: 99%;

View File

@ -0,0 +1,69 @@
<template>
<el-dialog v-model="modelValue" :title="props.title" @close="close" :close-on-click-modal="false">
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules"></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>
</template>
<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { reactive, ref } from 'vue';
const props = defineProps({
modelValue:{
type:Boolean,
default:false
},
dic:{
type:Object,
default:{}
},
title:{
type:String,
default:'新增人员'
}
})
const elform = ref()
const emit = defineEmits('update:modelValue')
const listQuery = ref({})
const formData = ref([
{ label: "姓名", prop: "xm", type: "input" },
{ label: "性别", prop: "xb", type: "select",options:props.dic.D_BZ_XB },
{ label: "身份证号", prop: "sfzh", type: "input" },
{ label: "户籍地", prop: "hjd", type: "input" },
{ label: "户籍地派出所", prop: "hjdpcs", type: "input" },
{ label: "标签", prop: "bq", type: "input" },
{ label: "是否挑头人", prop: "sfdtr", type: "select",options:props.dic.D_BZ_SF },
{ label: "是否响应人", prop: "sfxyr", type: "select" ,options:props.dic.D_BZ_SF },
{ label: "所属群体", prop: "ssqt", type: "input" },
{ label: "微信号", prop: "wxh", type: "input" },
{ label: "QQ", prop: "qqh", type: "input" },
])
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 submitForm = () =>{
elform.value.submit(()=>{
})
}
const close = () =>{
elform.value.reset();
emit('update:modelValue',false)
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--default {
width: 48% !important;
}
</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.ryXm"
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="ryXm" align="center" label="姓名" />
<el-table-column prop="ryLxdh" align="center" label="联系电话" />
<el-table-column prop="rySfzh" align="center" label="身份证号">
</el-table-column>
<el-table-column prop="bqYs" align="center" label="民族">
<template #default="{ row }">
<DictTag
:value="row.ryMz"
:tag="false"
:options="props.dic.D_BZ_MZ"
/>
</template>
</el-table-column>
<el-table-column prop="jzdDz" align="center" label="居住地址">
</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);
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/tbGsxtJwry/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,469 +1,203 @@
<template>
<div class="intelligence-management">
<!-- 左边 -->
<div class="left-panel">
<div class="pl80">
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="线索库" name="one"></el-tab-pane>
<el-tab-pane label="人员库" name="two"></el-tab-pane>
</el-tabs>
</div>
<div class="search-box">
<el-input
v-model="searchQuery"
placeholder="请输入线索标题"
suffix-icon="Search"
/>
</div>
<div class="flex mt10 just-center">
<el-button size="small" type="primary">上报线索</el-button>
<el-button size="small" type="primary" @click="addEdit('add',null)">新增线索</el-button>
<el-button size="small" type="primary">查询</el-button>
<el-button size="small">重置</el-button>
</div>
<div class="flex flex-warp">
<span
style="color: #0386fb"
class="f12 ml10 mt4"
v-for="(it, idex) in list.leftCoutn"
:key="idex"
>{{ it.label }}({{ it.value }})</span
>
</div>
<div class="person-list">
<div v-for="(item, index) in personList" :key="index" class="clue-item">
<div class="clue-tag" v-if="item.tag">{{ item.tag }}</div>
<span class="clue-status">处置</span>
<div class="clue-content flex align-center">
<img class="mr10" src="@/assets/images/icon100.png" alt="">
<div class="clue-info">
<div class="clue-header">*****线索</div>
<div>编号{{ item.number }}</div>
<div>来源{{ item.source }}</div>
<div>涉及人员数量{{ item.personCount }}</div>
<div>指向地点{{ item.location }}</div>
</div>
</div>
</div>
</div>
<div>
<div class="titleBox">
<PageTitle title="人力情报信息采集流转">
<el-button type="primary" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">导出</span>
</el-button>
<el-button type="danger" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><Dete /></el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
</PageTitle>
</div>
<!-- 右边 -->
<div class="right-panel">
<div class="flex just-between align-center">
<h2 class="title" style="color: #333">xxxx线索详情</h2>
<el-button type="primary" size="small">收藏</el-button>
</div>
<div style="width: 100%">
<el-descriptions :column="2" border>
<el-descriptions-item :width="260" label="线索标题"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索编号"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="线索类型"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索来源"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="开始时间"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="截止时间"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="上报单位"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="指向地点"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="上报时间"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="处置状态"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="群体状态"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="群体名称"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="线索标签大类"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索标签细类"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="所属专题"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="市内外"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="是否涉及外地"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="具体部位"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="指向时间类型"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="指向时间备注"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="表现形式"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="涉事类型"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="获取手段"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="线索备注"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="线索内容" :span="2"
>张三身份证号:1232025在林某...</el-descriptions-item
>
</el-descriptions>
<el-descriptions :column="5" border>
<el-descriptions-item :width="260" label="附件"
>3.xls</el-descriptions-item
>
<el-descriptions-item label="涉及地">林芝</el-descriptions-item>
<el-descriptions-item label="申请人">林芝</el-descriptions-item>
<el-descriptions-item label="审核人">林芝</el-descriptions-item>
<el-descriptions-item label="审批人">林芝</el-descriptions-item>
</el-descriptions>
</div>
<div class="flex mt10 just-center">
<el-button size="large" type="primary">核查单</el-button>
<el-button size="large" type="primary">验收</el-button>
</div>
<div class="flex align-center">
<h2 class="title" style="color: #333">******线索关联人员信息</h2>
<span
style="color: #0386fb"
class="f12 ml10"
v-for="(it, idex) in list.countList"
:key="idex"
>{{ it.label }}({{ it.value }})</span
>
</div>
<div style="width: 100%">
<Search
:searchArr="searchConfiger"
@submit="onSearch"
:key="pageData.keyCount"
>
<el-button type="primary">指派</el-button>
<el-button type="primary">导出</el-button>
</Search>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-button size="small">查看档案</el-button>
<el-button size="small">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</MyTable>
</div>
<div class="flex mt10 just-center">
<el-button size="large" type="primary">保存</el-button>
<el-button size="large" type="primary">采纳</el-button>
<el-button size="large" type="primary">处置</el-button>
<el-button size="large">取消</el-button>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData">
<template #shzt="{row}">
<span>采纳将这条信息推送到</span>
<span>退回</span>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
<!-- 新增 -->
<AddForm ref="detailDiloag" :dic="{D_BZ_SF,D_BZ_XB,D_GS_XS_LY,D_BZ_SSZT,D_GS_XS_LX ,D_GS_XS_QTLX}" />
</div>
<!-- 新增 -->
<AddForm ref="detailDiloag" ></AddForm>
</template>
<script setup>
import AddForm from "./components/addForm.vue";
import Search from "@/components/aboutTable/Search.vue";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref, reactive } from "vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import AddForm from "./components/addForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const {D_GS_XS_LY, D_BZ_SSZT,D_BZ_SF,D_GS_XS_LX ,D_GS_XS_QTLX,D_BZ_XB} = proxy.$dict("D_GS_XS_LY","D_BZ_SSZT","D_BZ_SF","D_GS_XS_LX","D_GS_XS_QTLX","D_BZ_XB"); //获取字典数据
const detailDiloag = ref();
const list = reactive({
leftCoutn: [
{ label: "总数", value: 100 },
{ label: "下发总数", value: 100 },
{ label: "已处置数", value: 10 },
{ label: "收藏", value: 100 },
{ label: "已反馈数量", value: 100 },
{ label: "未反馈数量", value: 100 },
{ label: "未处置数量", value: 100 }
],
countList: [
{ label: "全部", value: 100 },
{ label: "已稳控", value: 100 },
{ label: "处置中", value: 10 },
{ label: "非本地人", value: 100 },
{ label: "未开始", value: 100 },
{ label: "其他人", value: 100 }
]
});
const searchBox = ref(); //搜索框
const searchQuery = ref(""); // 搜索关键词
const searchConfiger = ref([
{
label: "姓名",
prop: "name",
placeholder: "请输入姓名",
showType: "input"
},
{
label: "身份证号",
prop: "sfzh",
placeholder: "请输入身份证号",
showType: "input"
}
{ label: "线索名称", prop: 'clueTitle', placeholder: "请输入线索名称", showType: "input" },
{ label: "语义关键字", prop: 'semanticKeywords', placeholder: "请输入语义关键字", showType: "input" },
{ label: "线索类型", prop: 'clueType', placeholder: "请选择线索类型", showType: "select" },
{ label: "线索来源", prop: 'clueSource', placeholder: "请选择线索来源", showType: "select" },
{ label: "线索状态", prop: 'xszt', placeholder: "请选择线索状态", showType: "select" },
{ label: "处置状态", prop: 'czzt', placeholder: "请选择处置状态", showType: "select" },
{ label: "开始时间", prop: 'startTime', placeholder: "请选择开始时间", showType: "date" },
{ label: "结束时间", prop: 'endTime', placeholder: "请选择结束时间", showType: "date" },
{ label: "指向地点", prop: 'targetLocation', placeholder: "请输入指向地点", showType: "input" },
]);
const pageData = reactive({
tableData: [
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101001",
clueTitle: "可疑人员活动线索",
clueType: "人员线索",
clueSource: "群众举报",
startTime: "2024-01-01 08:00:00",
endTime: "2024-01-01 18:00:00",
targetLocation: "某市某区某街道",
clueContent: "发现多名可疑人员在该区域频繁出入,疑似从事非法活动。",
attachment: "report.pdf"
},
{
name: "张三",
xb: "",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101002",
clueTitle: "涉毒交易线索",
clueType: "违法犯罪线索",
clueSource: "技术侦查",
startTime: "2024-01-02 10:00:00",
endTime: "2024-01-02 16:00:00",
targetLocation: "某市某区某小区",
clueContent: "监控发现多次可疑交易活动,疑似涉及违禁物品。",
attachment: "evidence.docx"
},
{
name: "张三",
xb: "",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
},
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
},
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101003",
clueTitle: "非法聚集线索",
clueType: "群体性事件",
clueSource: "网络监控",
startTime: "2024-01-03 14:00:00",
endTime: "2024-01-03 22:00:00",
targetLocation: "某市某广场",
clueContent: "网络平台发现有组织策划非法聚集活动的信息。",
attachment: "online_evidence.zip"
}
], //表格数据
],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false
},
tableHeight: 300,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 250, //操作栏宽度
},
controlsWidth: 220,
tableColumn: [
{ label: "姓名", prop: "name" },
{ label: "性别", prop: "xb" },
{ label: "身份证号", prop: "sfzh" },
{ label: "手机号", prop: "sjh" },
{ label: "检查部门", prop: "jcbm" },
{ label: "状态", prop: "zt" }
{ label: "线索编号", prop: "clueNo" },
{ label: "线索名称", prop: "clueTitle" },
{ label: "线索类型", prop: "clueType" },
{ label: "线索来源", prop: "clueSource" },
{ label: "开始时间", prop: "startTime" },
{ label: "结束时间", prop: "endTime" },
{ label: "指向地点", prop: "targetLocation" },
{ label: "线索内容", prop: "clueContent", width: 200 },
{ label: "附件", prop: "attachment", solt: true },
]
});
// 选中的人员
const selectedPerson = ref(null);
const queryFrom = ref({});
// 搜所
const onSearch = (data) => {
console.log(data);
};
// 模拟人员列表数据
const personList = ref([
{
number: "12345854",
title: "*****线索",
source: "*****",
personCount: "涉及人员数量",
location: "指向地点",
tag: "待签收",
status: "处置"
},
{
number: "12345854",
title: "*****线索",
source: "*****",
personCount: "涉及人员数量",
location: "指向地点",
status: "处置",
tag: "待签收",
}
// 更多人员数据...
]);
onMounted(() => {
getList()
tabHeightFn();
});
// 模拟相关人员数据
const relatedPersons = ref([
{
name: "李四",
relation: "朋友",
phone: "13900139000",
status: "正常"
}
// 更多相关人员数据...
]);
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList()
}
// 搜索
const onSearch = (val) =>{
queryFrom.value = {...val}
pageData.pageConfiger.pageCurrent = 1;
getList()
}
const changeNo = (val) =>{
pageData.pageConfiger.pageNum = val;
getList()
}
const changeSize = (val) =>{
pageData.pageConfiger.pageSize = val;
getList()
}
// 获取列表
const getList = (val) =>{
// pageData.tableConfiger.loading = true;
let data = { ...pageData.pageConfiger, ...queryFrom.value };
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
// qcckPost(data,url).then(res=>{
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
}
// 详情
const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
nextTick(()=>{
detailDiloag.value.init(type, row);
})
};
// 选择人员
const selectPerson = (person) => {
selectedPerson.value = person;
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
window.onresize = function () {
tabHeightFn();
};
};
</script>
<style lang="scss" scoped>
.intelligence-management {
margin-top: 10px;
width: 100%;
height: 100%;
position: relative;
.left-panel {
width: 300px;
border-right: 1px solid #dcdfe6;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
float: left;
.search-box {
padding: 16px;
border-bottom: 1px solid #dcdfe6;
}
.person-list {
flex: 1;
overflow-y: auto;
padding: 10px;
.clue-item {
background: #f5f7fa;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
.clue-status {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
color: #fff;
background: #409eff;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
}
.clue-tag {
position: absolute;
top: 1px;
left: -27px;
background: #f56c6c;
color: #fff;
padding: 10px 30px;
border-radius: 2px;
font-size: 12px;
transform: rotate(-38deg);
}
.clue-header {
color: #333;
font-size: 14px;
}
.clue-info {
font-size: 12px;
color: #666;
line-height: 1.8;
}
&:hover {
background: #e6f1fc;
}
}
}
}
.right-panel {
width: calc(100% - 310px);
height: 100%;
float: left;
margin-left: 10px;
padding: 10px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 4px;
overflow: hidden;
overflow-y: auto;
.title {
position: relative;
&::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 78px;
height: 4px;
background: linear-gradient(
90deg,
#3596f9 0%,
rgba(53, 150, 249, 0) 100%
);
border-radius: 4px 4px 4px 4px;
}
}
}
::v-deep .el-tabs__nav-wrap::after {
background: #e9e9e9;
width: 58%;
}
<style>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
</style>
</style>

View File

@ -30,16 +30,13 @@ const formData = ref([
{ label: "要素名称", prop: "sfbqxl", type: "input", options: [] },
{ label: "要素描述", prop: "ysms", type: "textarea", width: "100%" },
]);
const listQuery = ref({
sfbqdj: []
}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
const rules = reactive({
bqmc: [{ required: true, message: "请输入标签名称", trigger: "blur" }]
});
const editpeo = ref();
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
onMounted(() => {});
// 初始化数据
const init = (type, row,) => {