This commit is contained in:
lcw
2026-04-07 11:12:09 +08:00
parent 582b8677fc
commit ef3c23a03a
13 changed files with 1206 additions and 763 deletions

View File

@ -3,87 +3,239 @@
<div class="head_box">
<span class="title">{{ title }}重点人管理</span>
<div>
<el-button type="primary" size="small" v-if="butShow" :loading="loading" @click="submit">保存</el-button>
<el-button type="primary" size="small" v-if="showAuditShBtn && showButData"
@click="openAuditDialog('sh')">审核</el-button>
<el-button type="primary" size="small" v-if="showAuditSpBtn && showButData"
@click="openAuditDialog('sp')">审批</el-button>
<el-button
type="primary"
size="small"
v-if="butShow"
:loading="loading"
@click="submit"
>保存</el-button
>
<el-button
type="primary"
size="small"
v-if="showAuditShBtn && showButData"
@click="openAuditDialog('sh')"
>审核</el-button
>
<el-button
type="primary"
size="small"
v-if="showAuditSpBtn && showButData"
@click="openAuditDialog('sp')"
>审批</el-button
>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<AuditDialog v-model="auditDialogVisible" :title="auditTitle" :formData="auditForm" :rules="auditRules"
:reasonProp="auditReasonProp" :loading="auditLoading" :dictEnum="D_BZ_SF" @cancel="handleAuditCancel"
@submit="handleAuditSubmit" />
<AuditDialog
v-model="auditDialogVisible"
:title="auditTitle"
:formData="auditForm"
:rules="auditRules"
:reasonProp="auditReasonProp"
:loading="auditLoading"
:dictEnum="D_BZ_SF"
@cancel="handleAuditCancel"
@submit="handleAuditSubmit"
/>
<div class="form_cnt flex just-between">
<div class="left_box">
<ul class="anchor-list">
<li @click="scrollToSection('info-section')" :class="activeSection === 'info-section' ? 'active' : ''">人员信息
<li
@click="scrollToSection('info-section')"
:class="activeSection === 'info-section' ? 'active' : ''"
>
人员信息
</li>
<li
@click="scrollToSection('backinfo-section')"
:class="activeSection === 'backinfo-section' ? 'active' : ''"
>
人员标签
</li>
<li
@click="scrollToSection('groupLabels-section')"
:class="activeSection === 'groupLabels-section' ? 'active' : ''"
v-if="!butShow"
>
关联车辆
</li>
<li
@click="scrollToSection('character-section')"
:class="activeSection === 'character-section' ? 'active' : ''"
>
背景信息
</li>
<li
@click="scrollToSection('controlInfo-section')"
:class="activeSection === 'controlInfo-section' ? 'active' : ''"
v-if="!butShow"
>
管控信息
</li>
<li
@click="scrollToSection('featinfo-section')"
:class="activeSection === 'featinfo-section' ? 'active' : ''"
v-if="!butShow"
>
全要素布控
</li>
<li
@click="scrollToSection('demandsInfo-section')"
:class="activeSection === 'demandsInfo-section' ? 'active' : ''"
v-if="!butShow"
>
密切联系人
</li>
<li
@click="scrollToSection('requestInfo-section')"
:class="activeSection === 'requestInfo-section' ? 'active' : ''"
v-if="!butShow"
>
动态轨迹
</li>
<li
@click="scrollToSection('personnel-section')"
:class="activeSection === 'personnel-section' ? 'active' : ''"
v-if="!butShow"
>
行为信息
</li>
<li
@click="scrollToSection('judgmentRecord-section')"
:class="activeSection === 'judgmentRecord-section' ? 'active' : ''"
v-if="!butShow"
>
走访记录
</li>
<li
@click="scrollToSection('historyAssembly-section')"
:class="activeSection === 'historyAssembly-section' ? 'active' : ''"
v-if="!butShow"
>
案件信息
</li>
<li
@click="scrollToSection('joblogging-section')"
:class="activeSection === 'joblogging-section' ? 'active' : ''"
v-if="!butShow"
>
现实表现
</li>
<li
@click="scrollToSection('joblogging-joblog')"
:class="activeSection === 'joblogging-joblog' ? 'active' : ''"
v-if="!butShow"
>
操作日志
</li>
<li @click="scrollToSection('backinfo-section')"
:class="activeSection === 'backinfo-section' ? 'active' : ''">人员标签</li>
<li @click="scrollToSection('groupLabels-section')"
:class="activeSection === 'groupLabels-section' ? 'active' : ''" v-if="!butShow">关联车辆</li>
<li @click="scrollToSection('character-section')"
:class="activeSection === 'character-section' ? 'active' : ''">背景信息</li>
<li @click="scrollToSection('controlInfo-section')"
:class="activeSection === 'controlInfo-section' ? 'active' : ''" v-if="!butShow">管控信息</li>
<li @click="scrollToSection('featinfo-section')" :class="activeSection === 'featinfo-section' ? 'active' : ''"
v-if="!butShow">全要素布控</li>
<li @click="scrollToSection('demandsInfo-section')"
:class="activeSection === 'demandsInfo-section' ? 'active' : ''" v-if="!butShow">密切联系人</li>
<li @click="scrollToSection('requestInfo-section')"
:class="activeSection === 'requestInfo-section' ? 'active' : ''" v-if="!butShow">动态轨迹</li>
<li @click="scrollToSection('personnel-section')"
:class="activeSection === 'personnel-section' ? 'active' : ''" v-if="!butShow">行为信息</li>
<li @click="scrollToSection('judgmentRecord-section')"
:class="activeSection === 'judgmentRecord-section' ? 'active' : ''" v-if="!butShow">走访记录</li>
<li @click="scrollToSection('historyAssembly-section')"
:class="activeSection === 'historyAssembly-section' ? 'active' : ''" v-if="!butShow">案件信息</li>
<li @click="scrollToSection('joblogging-section')"
:class="activeSection === 'joblogging-section' ? 'active' : ''" v-if="!butShow">现实表现</li>
<li @click="scrollToSection('joblogging-joblog')"
:class="activeSection === 'joblogging-joblog' ? 'active' : ''" v-if="!butShow">操作日志</li>
</ul>
</div>
<div class="right_box" ref="rightBox">
<div id="info-section">
<Info ref="info" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<Info
ref="info"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
@close="close"
/>
</div>
<div id="backinfo-section">
<PersonnelTags ref="personnelTags" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<PersonnelTags
ref="personnelTags"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="groupLabels-section" v-if="!butShow">
<Vehicle ref="vehicle" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<Vehicle
ref="vehicle"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="character-section">
<BackInfo ref="backInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<BackInfo
ref="backInfo"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="controlInfo-section" v-if="!butShow">
<ControlInfo ref="controlInfo" title="重点人" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<ControlInfo
ref="controlInfo"
title="重点人"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="featinfo-section" v-if="!butShow">
<Deployment ref="deployment" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<Deployment
ref="deployment"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="demandsInfo-section" v-if="!butShow">
<Contact ref="contact" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<Contact
ref="contact"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="requestInfo-section" v-if="!butShow">
<DynamicTrajectory ref="dynamicTrajectory" :disabled="disabled" :showBut="showBut" />
<DynamicTrajectory
ref="dynamicTrajectory"
:disabled="disabled"
:showBut="showBut"
/>
</div>
<div id="personnel-section" v-if="!butShow">
<BehaviorInfo ref="behaviorInfo" :disabled="disabled" :showBut="showBut" />
<BehaviorInfo
ref="behaviorInfo"
:disabled="disabled"
:showBut="showBut"
/>
</div>
<div id="judgmentRecord-section" v-if="!butShow">
<VisitRecord ref="visitRecord" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<VisitRecord
ref="visitRecord"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="historyAssembly-section" v-if="!butShow">
<CaseInfo ref="caseInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<CaseInfo
ref="caseInfo"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="joblogging-section" v-if="!butShow">
<ActualPerformance ref="actualPerformance" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<ActualPerformance
ref="actualPerformance"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
<div id="joblogging-joblog" v-if="!butShow">
<CzModel ref="czModel" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
<CzModel
ref="czModel"
:disabled="disabled"
:showBut="showBut"
:dataList="listQuery"
/>
</div>
</div>
</div>
@ -95,100 +247,106 @@ import { getItem } from "@/utils/storage";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { tbGsxtZdrySelectVoById, tbGsxtZdrySave } from "@/api/zdr.js";
import AuditDialog from "./auditDialog.vue";
import ControlInfo from '../../mpvGroup/model/controlInfo.vue'
import ControlInfo from "../../mpvGroup/model/controlInfo.vue";
import Info from "../model/info.vue";
import PersonnelTags from '../model/personnelTags.vue'
import Vehicle from '../model/vehicle.vue'
import BackInfo from '../model/bakInfo.vue'
import Deployment from '../model/deployment.vue'
import Contact from '../model/contact.vue'
import DynamicTrajectory from '../model/dynamicTrajectory.vue'
import BehaviorInfo from '../model/behaviorInfo.vue'
import VisitRecord from '../model/visitRecord.vue'
import CaseInfo from '../model/caseInfo.vue'
import ActualPerformance from '../model/actualPerformance.vue'
import CzModel from '../model/czModel.vue'
import { useRouter, useRoute } from 'vue-router'
import PersonnelTags from "../model/personnelTags.vue";
import Vehicle from "../model/vehicle.vue";
import BackInfo from "../model/bakInfo.vue";
import Deployment from "../model/deployment.vue";
import Contact from "../model/contact.vue";
import DynamicTrajectory from "../model/dynamicTrajectory.vue";
import BehaviorInfo from "../model/behaviorInfo.vue";
import VisitRecord from "../model/visitRecord.vue";
import CaseInfo from "../model/caseInfo.vue";
import ActualPerformance from "../model/actualPerformance.vue";
import CzModel from "../model/czModel.vue";
import { useRouter, useRoute } from "vue-router";
import { ref, onUnmounted, getCurrentInstance, computed, reactive } from "vue";
const router = useRouter()
const route = useRoute()
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const emit = defineEmits(["updateDate"]);
const chooseMarksVisible = ref(false);
const dialogForm = ref(false); //弹窗
const loading = ref(false);
const disabled = ref(false)
const showBut = ref(false)
const disabled = ref(false);
const showBut = ref(false);
const listQuery = ref({});
const butShow = ref(false)
const title = ref('新增')
const showData = ref(false)
const modeType = ref("detail")
const currentRowId = ref("")
const auditDialogVisible = ref(false)
const auditLoading = ref(false)
const butShow = ref(false);
const title = ref("新增");
const showData = ref(false);
const modeType = ref("detail");
const currentRowId = ref("");
const auditDialogVisible = ref(false);
const auditLoading = ref(false);
const auditForm = reactive({
id: "",
sftg: undefined,
shBtgyy: "",
spBtgyy: ""
})
});
const auditRules = reactive({
sftg: [{ required: true, message: "请选择是否通过", trigger: "change" }],
shBtgyy: [{ required: true, message: "请输入不通过原因", trigger: "blur" }],
spBtgyy: [{ required: true, message: "请输入不通过原因", trigger: "blur" }]
})
const auditTitle = computed(() => modeType.value === "sp" ? "审批" : "审核")
const auditReasonProp = computed(() => modeType.value === "sp" ? "spBtgyy" : "shBtgyy")
const showAuditShBtn = computed(() => modeType.value === "detail" && dataListQuery.value?.zdrZt == "02")
const showAuditSpBtn = computed(() => modeType.value === "detail" && dataListQuery.value?.zdrZt == "04")
});
const auditTitle = computed(() => (modeType.value === "sp" ? "审批" : "审核"));
const auditReasonProp = computed(() =>
modeType.value === "sp" ? "spBtgyy" : "shBtgyy"
);
const showAuditShBtn = computed(
() => modeType.value === "detail" && dataListQuery.value?.zdrZt == "02"
);
const showAuditSpBtn = computed(
() => modeType.value === "detail" && dataListQuery.value?.zdrZt == "04"
);
const props = defineProps({
rylx: {
type: String,
default: '01'
default: "01"
},
showButData: {
type: Boolean,
default: false
},
})
const dataListQuery = ref({})
}
});
const dataListQuery = ref({});
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
modeType.value = type;
currentRowId.value = row?.id || "";
if (type == 'add') {
butShow.value = true
title.value = '新增'
disabled.value = false
showBut.value = false
listQuery.value = {}
if (type == "add") {
butShow.value = true;
title.value = "新增";
disabled.value = false;
showBut.value = false;
listQuery.value = {};
} else {
butShow.value = false
dataListQuery.value = { ...row }
tbGsxtZdrySelectVoById({ id: row.id }).then(res => {
listQuery.value = { ...res }
})
if (type == 'edit') {
showBut.value = true
disabled.value = false
title.value = '编辑'
butShow.value = false;
dataListQuery.value = { ...row };
tbGsxtZdrySelectVoById({ id: row.id }).then((res) => {
listQuery.value = { ...res };
});
if (type == "edit") {
showBut.value = true;
disabled.value = false;
title.value = "编辑";
} else if (type == "del") {
disabled.value = true
showBut.value = false
title.value = '删除'
disabled.value = true;
showBut.value = false;
title.value = "删除";
} else {
disabled.value = true
showBut.value = false
title.value = '详情'
disabled.value = true;
showBut.value = false;
title.value = "详情";
}
}
};
const activeSection = ref('info-section')
const rightBox = ref(null)
const activeSection = ref("info-section");
const rightBox = ref(null);
// 滚动到指定区域
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId);
@ -197,21 +355,30 @@ const scrollToSection = (sectionId) => {
const elementTop = element.offsetTop;
rightBox.value.scrollTo({
top: elementTop - 150, // 减去一些偏移量,让内容更好看
behavior: 'smooth' // 平滑滚动
behavior: "smooth" // 平滑滚动
});
activeSection.value = sectionId;
}
}
};
// 监听滚动,更新当前激活的锚点
const handleScroll = () => {
if (!rightBox.value) return;
const scrollPosition = rightBox.value.scrollTop + 50;
const sections = [
'info-section', 'backinfo-section', 'groupLabels-section',
'character-section', 'controlInfo-section', 'featinfo-section',
'demandsInfo-section', 'requestInfo-section', 'personnel-section',
'judgmentRecord-section', 'historyAssembly-section', 'joblogging-section', "czModel-section"
"info-section",
"backinfo-section",
"groupLabels-section",
"character-section",
"controlInfo-section",
"featinfo-section",
"demandsInfo-section",
"requestInfo-section",
"personnel-section",
"judgmentRecord-section",
"historyAssembly-section",
"joblogging-section",
"czModel-section"
];
for (let i = sections.length - 1; i >= 0; i--) {
@ -221,26 +388,26 @@ const handleScroll = () => {
break;
}
}
}
};
// 监听右侧区域的滚动事件
if (typeof window !== 'undefined') {
window.addEventListener('load', () => {
if (typeof window !== "undefined") {
window.addEventListener("load", () => {
if (rightBox.value) {
rightBox.value.addEventListener('scroll', handleScroll);
rightBox.value.addEventListener("scroll", handleScroll);
}
});
// 组件卸载时移除事件监听
onUnmounted(() => {
if (rightBox.value) {
rightBox.value.removeEventListener('scroll', handleScroll);
rightBox.value.removeEventListener("scroll", handleScroll);
}
});
}
const info = ref()
const personnelTags = ref()
const info = ref();
const personnelTags = ref();
// 提交
const submit = async () => {
// 使用Promise.all处理所有子组件的验证和数据获取
@ -248,27 +415,26 @@ const submit = async () => {
info.value.throwData()
// personnelTags.value.throwData(),
]);
tbGsxtZdrySave({ ...infoData, rylx: props.rylx }).then(res => {
tbGsxtZdrySave({ ...infoData, rylx: props.rylx }).then((res) => {
proxy.$message({
message: '新增成功',
type: 'success',
})
close()
})
message: "新增成功",
type: "success"
});
close();
});
console.log(infoData);
};
const butzt = ref()
const butzt = ref();
const openAuditDialog = (type) => {
// modeType.value = type;
butzt.value = type
butzt.value = type;
auditForm.id = currentRowId.value || listQuery.value?.id || "";
auditForm.sftg = undefined;
auditForm.shBtgyy = "";
auditForm.spBtgyy = "";
auditDialogVisible.value = true;
}
};
const handleAuditCancel = () => {
auditDialogVisible.value = false;
@ -278,24 +444,29 @@ const handleAuditCancel = () => {
auditForm.sftg = undefined;
auditForm.shBtgyy = "";
auditForm.spBtgyy = "";
}
};
const handleAuditSubmit = () => {
auditLoading.value = true;
const url = butzt.value === "sp" ? "/mosty-gsxt/tbGsxtZdry/updateSp" : "/mosty-gsxt/tbGsxtZdry/updateSh";
const url =
butzt.value === "sp"
? "/mosty-gsxt/tbGsxtZdry/updateSp"
: "/mosty-gsxt/tbGsxtZdry/updateSh";
const successMsg = modeType.value === "sp" ? "审批成功" : "审核成功";
qcckPost(auditForm, url).then(() => {
proxy.$message({
message: successMsg,
type: 'success',
qcckPost(auditForm, url)
.then(() => {
proxy.$message({
message: successMsg,
type: "success"
});
auditDialogVisible.value = false;
modeType.value = "detail";
close();
})
auditDialogVisible.value = false;
modeType.value = "detail";
close();
}).catch(() => {
auditLoading.value = false;
});
}
.catch(() => {
auditLoading.value = false;
});
};
// 关闭
const close = () => {
@ -315,7 +486,7 @@ const close = () => {
auditForm.sftg = undefined;
auditForm.shBtgyy = "";
auditForm.spBtgyy = "";
emit('updateDate')
emit("updateDate");
};
defineExpose({ init });
@ -326,7 +497,6 @@ defineExpose({ init });
@import "~@/assets/css/element-plus.scss";
.behaviorInfo {
margin: 0 0 10px 0;
// padding-bottom: 10px;
border-bottom: 2px solid #409eff;
@ -337,7 +507,6 @@ defineExpose({ init });
font-weight: 600;
color: #303133;
}
}
.textContent {
@ -426,7 +595,7 @@ defineExpose({ init });
scrollbar-color: #999 #f1f1f1;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
color: #0072ff;
background: rgba(0, 114, 255, 0.3);
}
@ -508,7 +677,7 @@ defineExpose({ init });
}
.anchor-list li.active::before {
content: '';
content: "";
position: absolute;
left: 0;
top: 0;
@ -526,7 +695,7 @@ defineExpose({ init });
// border: 1px solid #ebeef5;
border-radius: 6px;
.right_box>div {
.right_box > div {
background-color: #f8f9fa;
border-radius: 6px;
padding: 20px;
@ -534,7 +703,7 @@ defineExpose({ init });
margin-bottom: 10px;
}
.right_box>div:hover {
.right_box > div:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@ -549,7 +718,7 @@ defineExpose({ init });
}
.right_box h3::after {
content: '';
content: "";
position: absolute;
left: 0;
bottom: -2px;
@ -607,6 +776,6 @@ defineExpose({ init });
}
::v-deep .avatar-uploader {
display: flex
display: flex;
}
</style>

View File

@ -111,6 +111,7 @@ const props = defineProps({
default: false
}
});
const emit = defineEmits(["close"]);
const rules = reactive({
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
...rule.identityCardRule({ validator: true }, "rySfzh"), //身份证校验
@ -345,6 +346,7 @@ const gettbGsxtZdryUpdate = () => {
message: "更新成功",
type: "success"
});
emit("close");
})
.catch((err) => {})
.finally(() => {