lcw
This commit is contained in:
@ -59,3 +59,36 @@ export const tbZdryClxxUpdate = (data) => {
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 密切联系人查询接口
|
||||
export const tbGsxtZdryLxrselectLxrBy = (params) => {
|
||||
return request({
|
||||
url: api + `/tbGsxtZdryLxr/selectLxrBy`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 密切联系人新增或者修改接口
|
||||
export const tbGsxtZdryLxrsaveOrUpdateLxr = (params) => {
|
||||
return request({
|
||||
url: api + `/tbGsxtZdryLxr/saveOrUpdateLxr`,
|
||||
method: "post",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 走访记录查询接口
|
||||
export const tbGsxtZdryZfjlselectZfjl = (params) => {
|
||||
return request({
|
||||
url: api + `/tbGsxtZdryZfjl/selectZfjl`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 案件信息查询接口
|
||||
export const tbGsxtZdryAjxxselectAjxx = (params) => {
|
||||
return request({
|
||||
url: api + `/tbGsxtZdryAjxx/selectAjxx`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,46 +1,22 @@
|
||||
<template>
|
||||
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
|
||||
<div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
|
||||
<!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
@selection-change="handleSelectionChange"
|
||||
:row-key="getConfiger.rowKey"
|
||||
:border="getConfiger.border"
|
||||
:default-expand-all="getConfiger.defaultExpandAll"
|
||||
:stripe="getConfiger.stripe"
|
||||
:height="tableHeight"
|
||||
v-loading="tableConfiger.loading"
|
||||
:lazy="getConfiger.lazy"
|
||||
:load="load"
|
||||
:tree-props="treePros"
|
||||
style="width: 100%"
|
||||
:header-cell-class-name="() => 'HeadBgColor'"
|
||||
<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
|
||||
:row-key="getConfiger.rowKey" :border="getConfiger.border" :default-expand-all="getConfiger.defaultExpandAll"
|
||||
:stripe="getConfiger.stripe" :height="tableHeight" v-loading="tableConfiger.loading" :lazy="getConfiger.lazy"
|
||||
:load="load" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
|
||||
:highlight-current-row="getConfiger.showSelectType === 'radio'"
|
||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px'}"
|
||||
>
|
||||
<el-table-column style="width: 55px" type="selection" width="55" v-if="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
v-if="getConfiger.showIndex"
|
||||
width="60"
|
||||
:align="getConfiger?.align"
|
||||
/>
|
||||
:row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">
|
||||
<el-table-column style="width: 55px" type="selection" width="55"
|
||||
v-if="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />
|
||||
<el-table-column type="index" label="序号" v-if="getConfiger.showIndex" width="60" :align="getConfiger?.align" />
|
||||
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableColumn"
|
||||
:align="getConfiger?.align"
|
||||
:prop="item.prop"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
style="width: 100%; font-size: 14px"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip || false"
|
||||
:sortable="item.sortable || false"
|
||||
>
|
||||
<el-table-column v-for="(item, index) in tableColumn" :align="getConfiger?.align" :prop="item.prop" :key="index"
|
||||
:label="item.label" :width="item.width" style="width: 100%; font-size: 14px"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip || false" :sortable="item.sortable || false">
|
||||
<!-- 使用自定义 -->
|
||||
<template v-if="item.showSolt" #default="scope">
|
||||
|
||||
<slot :name="item.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
<!-- 默认 -->
|
||||
@ -48,14 +24,10 @@
|
||||
{{ row[item.prop] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作 -->
|
||||
<el-table-column
|
||||
v-if="getConfiger.haveControls"
|
||||
:fixed="fixed"
|
||||
:label="getConfiger.controls"
|
||||
:width="controlsWidth"
|
||||
:align="getConfiger?.align"
|
||||
>
|
||||
<el-table-column v-if="getConfiger.haveControls" :fixed="fixed" :label="getConfiger.controls"
|
||||
:width="controlsWidth" :align="getConfiger?.align">
|
||||
<template #default="scope">
|
||||
<slot name="controls" v-bind="scope"></slot>
|
||||
</template>
|
||||
@ -69,7 +41,7 @@ import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
|
||||
const props = defineProps({
|
||||
tableConfiger: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => { }
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
@ -130,12 +102,12 @@ onMounted(() => {
|
||||
});
|
||||
// 可选的时候选择的数据
|
||||
const handleSelectionChange = (val) => {
|
||||
if(getConfiger.showSelectType === 'radio' && val.length > 1){
|
||||
if (getConfiger.showSelectType === 'radio' && val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleTableRef.value.toggleRowSelection(del_row, false);
|
||||
currentRow.value = val;
|
||||
emit("chooseData", val);
|
||||
}else{
|
||||
} else {
|
||||
emit("chooseData", val);
|
||||
}
|
||||
};
|
||||
@ -163,29 +135,27 @@ const load = (date, treeNode, resolve) => {
|
||||
function setDefaultChoose() {
|
||||
nextTick(() => {
|
||||
// 多选的默认选中
|
||||
if ( props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox" ) {
|
||||
if (props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox") {
|
||||
props.tableData.forEach((item) => {
|
||||
if ( props.tableConfiger.defaultSelectKeys.findIndex( (v) => v === item[props.tableConfiger.rowKey] ) > -1) {
|
||||
if (props.tableConfiger.defaultSelectKeys.findIndex((v) => v === item[props.tableConfiger.rowKey]) > -1) {
|
||||
multipleTableRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
// 单选的默认选中
|
||||
} else if ( props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio" ) {
|
||||
} else if (props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio") {
|
||||
getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang = "scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体管控信息</h3>
|
||||
<h3>管控信息</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
@ -74,6 +74,9 @@ const pageData = reactive({
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
console.log('ControlInfo 组件已挂载！')
|
||||
})
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
|
||||
@ -3,41 +3,116 @@
|
||||
<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="butShow" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<li @click="scrollToSection('backinfo-section')" :class="activeSection === 'backinfo-section' ? 'active' : ''">人员标签</li>
|
||||
<li @click="scrollToSection('groupLabels-section')" :class="activeSection === 'groupLabels-section' ? 'active' : ''">群体标签</li>
|
||||
<li @click="scrollToSection('character-section')" :class="activeSection === 'character-section' ? 'active' : ''">群体性质</li>
|
||||
<li @click="scrollToSection('controlInfo-section')" :class="activeSection === 'controlInfo-section' ? 'active' : ''">管控信息</li>
|
||||
<li @click="scrollToSection('featinfo-section')" :class="activeSection === 'featinfo-section' ? 'active' : ''">群体特征</li>
|
||||
<li @click="scrollToSection('demandsInfo-section')" :class="activeSection === 'demandsInfo-section' ? 'active' : ''">主要诉求</li>
|
||||
<li @click="scrollToSection('requestInfo-section')" :class="activeSection === 'requestInfo-section' ? 'active' : ''">诉求信息</li>
|
||||
<li @click="scrollToSection('personnel-section')" :class="activeSection === 'personnel-section' ? 'active' : ''">重点人员</li>
|
||||
<li @click="scrollToSection('judgmentRecord-section')" :class="activeSection === 'judgmentRecord-section' ? 'active' : ''">研判记录</li>
|
||||
<li @click="scrollToSection('historyAssembly-section')" :class="activeSection === 'historyAssembly-section' ? 'active' : ''">历史汇集</li>
|
||||
<li @click="scrollToSection('joblogging-section')" :class="activeSection === 'joblogging-section' ? 'active' : ''">工作记录</li>
|
||||
<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' : ''">群体标签</li>
|
||||
<li @click="scrollToSection('character-section')"
|
||||
:class="activeSection === 'character-section' ? 'active' : ''">群体性质</li>
|
||||
<li @click="scrollToSection('controlInfo-section')"
|
||||
:class="activeSection === 'controlInfo-section' ? 'active' : ''">管控信息</li>
|
||||
<li @click="scrollToSection('featinfo-section')"
|
||||
:class="activeSection === 'featinfo-section' ? 'active' : ''">群体特征</li>
|
||||
<li @click="scrollToSection('demandsInfo-section')"
|
||||
:class="activeSection === 'demandsInfo-section' ? 'active' : ''">主要诉求</li>
|
||||
<li @click="scrollToSection('requestInfo-section')"
|
||||
:class="activeSection === 'requestInfo-section' ? 'active' : ''">诉求信息</li>
|
||||
<li @click="scrollToSection('personnel-section')"
|
||||
:class="activeSection === 'personnel-section' ? 'active' : ''">重点人员</li>
|
||||
<li @click="scrollToSection('judgmentRecord-section')"
|
||||
:class="activeSection === 'judgmentRecord-section' ? 'active' : ''">研判记录</li>
|
||||
<li @click="scrollToSection('historyAssembly-section')"
|
||||
:class="activeSection === 'historyAssembly-section' ? 'active' : ''">历史汇集</li>
|
||||
<li @click="scrollToSection('joblogging-section')"
|
||||
:class="activeSection === 'joblogging-section' ? 'active' : ''">工作记录</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right_box" ref="rightBox">
|
||||
<div id="info-section"><Info ref="info" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="backinfo-section"><PersonnelTags ref="personnelTags" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="groupLabels-section"><Vehicle ref="vehicle" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="character-section"><BackInfo ref="backInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<!-- <div id="controlInfo-section"><ControlInfo ref="controlInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="featinfo-section"><Featinfo ref="featinfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="demandsInfo-section"><DemandsInfo ref="demandsInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="requestInfo-section"><RequestInfo ref="requestInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="portrayal-section" v-if="portrayal"><Portrayal :disabled="disabled" :dataList="listQuery" /></div>
|
||||
<div id="personnel-section"><Personnel ref="personnel" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="judgmentRecord-section"><JudgmentRecord ref="judgmentRecord" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="historyAssembly-section"><HistoryAssembly ref="historyAssembly" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div>
|
||||
<div id="joblogging-section"><Joblogging ref="joblogging" :disabled="disabled" :showBut="showBut" :dataList="listQuery" /></div> -->
|
||||
<div id="info-section">
|
||||
<Info ref="info" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="backinfo-section">
|
||||
<PersonnelTags ref="personnelTags" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="groupLabels-section">
|
||||
<Vehicle ref="vehicle" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="character-section">
|
||||
<BackInfo ref="backInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="controlInfo-section">
|
||||
<controlInfo ref="controlInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="deployment-section">
|
||||
<deployment ref="deployment" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="contact-section">
|
||||
<contact ref="contact" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
|
||||
<div id="dynamicTrajectory-section">
|
||||
<dynamicTrajectory ref="dynamicTrajectory" :disabled="disabled" :showBut="showBut" />
|
||||
</div>
|
||||
<div class="behaviorInfo" style="">
|
||||
<h3>行为信息</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="textContent">
|
||||
基站认证信息：2022-3-33 12：30：30出现在乃宁市
|
||||
</div>
|
||||
<div class="textContent">
|
||||
基站认证信息：2022-3-33 12：30：30出现在乃宁市
|
||||
</div>
|
||||
<div class="textContent">
|
||||
基站认证信息：2022-3-33 12：30：30出现在乃宁市
|
||||
</div>
|
||||
<div class="textContent">
|
||||
基站认证信息：2022-3-33 12：30：30出现在乃宁市
|
||||
</div>
|
||||
</div>
|
||||
<div id="visitRecord-section">
|
||||
<visitRecord ref="visitRecord" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="caseInfo-section">
|
||||
<caseInfo ref="caseInfo" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div id="actualPerformance-section">
|
||||
<actualPerformance ref="actualPerformance" :disabled="disabled" :showBut="showBut" :dataList="listQuery" />
|
||||
</div>
|
||||
<div class="behaviorInfo" style="">
|
||||
<h3>操作日志</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<!-- 滚动列表容器 -->
|
||||
<div class="list-container">
|
||||
<!-- 固定标题行 -->
|
||||
<div class="list-header">
|
||||
<span>账号名称</span>
|
||||
<span>操作时间</span>
|
||||
<span>操作记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容 -->
|
||||
<div class="list-body">
|
||||
<div class="list-item" v-for="i in 30" :key="i">
|
||||
<span>张三</span>
|
||||
<span>2020-3030-2202</span>
|
||||
<span>新增操作记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,12 +123,18 @@
|
||||
import { getItem } from "@/utils/storage";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import { tbGsxtZdrySelectVoById } from "@/api/zdr.js";
|
||||
|
||||
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 { ref,onUnmounted} from "vue";
|
||||
import deployment from '../model/deployment.vue'
|
||||
import contact from '../model/contact.vue'
|
||||
import dynamicTrajectory from '../model/dynamicTrajectory.vue'
|
||||
import visitRecord from '../model/visitRecord.vue'
|
||||
import caseInfo from '../model/caseInfo.vue'
|
||||
import actualPerformance from '../model/actualPerformance.vue'
|
||||
import { ref, onUnmounted } from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const chooseMarksVisible = ref(false);
|
||||
const dialogForm = ref(false); //弹窗
|
||||
@ -61,26 +142,33 @@ const loading = ref(false);
|
||||
const disabled = ref(false)
|
||||
const showBut = ref(false)
|
||||
const listQuery = ref({});
|
||||
const butShow=ref(false)
|
||||
const butShow = ref(false)
|
||||
const title = ref('新增')
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (type == 'add') {
|
||||
butShow.value=true
|
||||
butShow.value = true
|
||||
title.value = '新增'
|
||||
disabled.value = false
|
||||
showBut.value=false
|
||||
showBut.value = false
|
||||
} else {
|
||||
butShow.value=false
|
||||
tbGsxtZdrySelectVoById({id:row.id}).then(res => {
|
||||
listQuery.value = res
|
||||
butShow.value = false
|
||||
tbGsxtZdrySelectVoById({ id: row.id }).then(res => {
|
||||
console.log(res, "dddddddddddddddd");
|
||||
|
||||
Object.assign(listQuery.value, res)
|
||||
})
|
||||
if (type == 'edit') {
|
||||
showBut.value = true
|
||||
disabled.value = false
|
||||
title.value = '编辑'
|
||||
} else {
|
||||
} else if (type == "del") {
|
||||
disabled.value = true
|
||||
showBut.value = false
|
||||
title.value = '删除'
|
||||
}
|
||||
else {
|
||||
disabled.value = true
|
||||
showBut.value = false
|
||||
title.value = '详情'
|
||||
@ -141,19 +229,19 @@ if (typeof window !== 'undefined') {
|
||||
});
|
||||
}
|
||||
|
||||
const info=ref()
|
||||
const personnelTags=ref()
|
||||
const info = ref()
|
||||
const personnelTags = ref()
|
||||
// 提交
|
||||
const submit =async () => {
|
||||
const submit = async () => {
|
||||
console.log(info.value.throwData());
|
||||
console.log(personnelTags.value.throwData());
|
||||
// 使用Promise.all处理所有子组件的验证和数据获取
|
||||
const [infoData, personnelTagsData] = await Promise.all([
|
||||
info.value.throwData(),
|
||||
personnelTags.value.throwData(),
|
||||
]);
|
||||
// 使用Promise.all处理所有子组件的验证和数据获取
|
||||
const [infoData, personnelTagsData] = await Promise.all([
|
||||
info.value.throwData(),
|
||||
personnelTags.value.throwData(),
|
||||
]);
|
||||
|
||||
console.log(infoData, personnelTagsData);
|
||||
console.log(infoData, personnelTagsData);
|
||||
|
||||
};
|
||||
|
||||
@ -171,11 +259,116 @@ defineExpose({ init });
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.behaviorInfo {
|
||||
|
||||
margin: 0 0 10px 0;
|
||||
// padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.textContent {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* 外层容器：控制尺寸和隐藏默认滚动条 */
|
||||
.list-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
/* 隐藏外层滚动条，由内部控制 */
|
||||
margin: 20px auto;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* 固定标题行 */
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
padding: 0 16px;
|
||||
height: 50px;
|
||||
border-bottom: 2px solid #ddd;
|
||||
position: sticky;
|
||||
/* 关键：固定标题 */
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
/* 确保在最上层 */
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 可滚动内容区域 */
|
||||
.list-body {
|
||||
height: calc(100% - 50px);
|
||||
/* 容器高度减去标题高度 */
|
||||
overflow-y: auto;
|
||||
/* 垂直滚动 */
|
||||
overflow-x: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 每一行内容 */
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
height: 50px;
|
||||
border-bottom: 1px dashed #eee;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* 自定义滚动条（可选） */
|
||||
.list-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.list-container::-webkit-scrollbar-thumb {
|
||||
background: #999;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
/* Firefox 支持 */
|
||||
.list-container {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #999 #f1f1f1;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
|
||||
color: #0072ff;
|
||||
background: rgba(0, 114, 255, 0.3);
|
||||
}
|
||||
|
||||
#contact-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.boxlist {
|
||||
width: calc(99% - 50px);
|
||||
margin-top: 10px;
|
||||
@ -267,55 +460,56 @@ defineExpose({ init });
|
||||
// border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
|
||||
.right_box>div {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 10px;
|
||||
.right_box>div {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.right_box>div:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.right_box h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right_box h3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
.el-button {
|
||||
margin-left: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right_box>div:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.right_box h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right_box h3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
.el-button {
|
||||
margin-left: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.el-button:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// 响应式设计
|
||||
@media screen and (max-width: 768px) {
|
||||
.form_cnt {
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
{{ visible }}
|
||||
<!-- 添加 -->
|
||||
<el-dialog v-model="visible" :title="Tips" width="40%" :before-close="handleClose">
|
||||
<el-form ref="historyForm" style="max-width: 600px" :model="diaLogRuleForm" :rules="diaLogRules">
|
||||
<div v-for="item in diaLogRuleForm" :key="item.props">
|
||||
<el-form-item label-width="80px" :label="item.label" :prop="item.props" style="width: 100%;">
|
||||
<el-input v-model="item.value" :placeholder="`请输入${item.label}`" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, ref, watch } from 'vue'
|
||||
|
||||
// 接收 v-model:visible
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
Tips: String,
|
||||
diaLogRules: Object,
|
||||
diaLogRuleForm: Object
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'submit'])
|
||||
|
||||
const formRef = ref(null)
|
||||
const formData = ref({})
|
||||
|
||||
// 监听外部传入的 formData 变化（如编辑时回显）
|
||||
watch(
|
||||
[() => props.diaLogRuleForm, props.visible],
|
||||
(val) => {
|
||||
console.log(val, "变化之后的diaLogRuleForm");
|
||||
|
||||
formData.value = val ? { ...val } : {}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 取消：关闭弹窗
|
||||
const onCancel = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
emit('submit', props.diaLogRuleForm) // 提交数据
|
||||
// formRef.value?.validate((valid) => {
|
||||
// if (valid) {
|
||||
|
||||
// // 不在这里关闭！由父组件决定是否关闭（比如提交失败不关闭）
|
||||
// }
|
||||
// })
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>现实表现</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<div class="headSelect">
|
||||
|
||||
<el-button @click="add" type="primary">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #clys="{ row }">
|
||||
<DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
|
||||
</template>
|
||||
<template #cllx="{ row }">
|
||||
<DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
|
||||
</template>
|
||||
<template #clpp="{ row }">
|
||||
<DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
<el-link type="danger" @click="updDictItem(row)">修改</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
|
||||
:dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { identityCardRule } from "@/utils/rules"
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import VehiclDoing from "../component/vehiclDoing.vue";
|
||||
import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbZdryClxxSelectPage, tbZdryClxxUpdate } from '@/api/zdr.js'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref({})
|
||||
const addUpd = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
gettbZdryClxxSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'cph',
|
||||
label: '录入人员',
|
||||
}, {
|
||||
prop: 'cllx',
|
||||
label: '录入时间',
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'clys',
|
||||
label: '表现内容',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
label: '附件信息',
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
username: "",
|
||||
ID: ""
|
||||
})
|
||||
const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
|
||||
// 修改数据接口
|
||||
const dataModel = ref()
|
||||
const addMarks = (val) => {
|
||||
const params = {
|
||||
...val,
|
||||
zdrid: listData.value.id,
|
||||
}
|
||||
if (props.showBut && !props.disabled) {
|
||||
if (addUpd.value) {
|
||||
tbZdryClxxAdd(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
else {
|
||||
tbZdryClxxUpdate(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
pageData.tableData.push(val)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
})
|
||||
// 删除车辆
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除关联车辆',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
tbZdryClxxDelete({ ids: [val] }).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.id != val)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const updDictItem = (val) => {
|
||||
chooseMarksVisible.value = true
|
||||
addUpd.value = false
|
||||
dataModel.value = val
|
||||
}
|
||||
const AddPore = () => {
|
||||
chooseMarksVisible.value = true
|
||||
dataModel.value = {}
|
||||
addUpd.value = true
|
||||
}
|
||||
// 查询车辆
|
||||
const gettbZdryClxxSelectPage = () => {
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
zdrid: listData.value.id
|
||||
}
|
||||
tbZdryClxxSelectPage(promes).then(res => {
|
||||
pageData.tableData = res.records
|
||||
})
|
||||
}
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// // 验证：确保标签列表不为空
|
||||
// if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
// throw new Error('请录入车辆信息');
|
||||
// }
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep(.el-form) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 20px 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.headSelect {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 移除冲突样式：不要用 justify-content */
|
||||
|
||||
/* 控制所有 el-form-item 高度和垂直居中 */
|
||||
.form-inline :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ✅ 按钮区域靠右，且不换行 */
|
||||
.form-inline .form-actions {
|
||||
margin-left: auto;
|
||||
/* 推到最右边 */
|
||||
white-space: nowrap;
|
||||
/* 防止按钮换行 */
|
||||
}
|
||||
|
||||
/* 统一按钮样式，增加间距和视觉舒适度 */
|
||||
.form-inline :deep(.el-button) {
|
||||
height: 36px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 按钮之间留出间距（除了第一个） */
|
||||
.form-inline :deep(.el-button:not(:first-child)) {
|
||||
margin-left: 12px;
|
||||
/* 比原来的 8px 更宽松 */
|
||||
}
|
||||
|
||||
// .headClass::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: -2px;
|
||||
// width: 60px;
|
||||
// height: 2px;
|
||||
// background-color: #409eff;
|
||||
// }
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -2,22 +2,65 @@
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3>群体信息</h3>
|
||||
<h3>背景信息</h3>
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<div>拘留记录：</div>
|
||||
<div v-for="(item,index) in jljl" :key="index">
|
||||
<el-input v-model="jljl[index]" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
|
||||
class="background-info-input" :disabled="disabled" /></div>
|
||||
</div> -->
|
||||
<div>
|
||||
<!-- 全部输入框 -->
|
||||
<el-form class="record" ref="ruleFormRef" :model="ruleForm" :rules="rules">
|
||||
<!-- 拘留所记录 -->
|
||||
<div class="detentionFacility">
|
||||
<div>拘留所记录：</div>
|
||||
<div>
|
||||
<div v-for="(item, i) in ruleForm.detentionCenterRecords" :key="item.id" class="detentionFacilityArr">
|
||||
<el-form-item :prop="'detentionCenterRecords.' + i + '.str'" :rules="rules.str">
|
||||
|
||||
<el-input v-model="ruleForm.detentionCenterRecords[i].str" class="detentionFacilityInput"
|
||||
placeholder="请输入拘留所记录" />
|
||||
</el-form-item>
|
||||
|
||||
<el-button type="primary"
|
||||
v-if="ruleForm.detentionCenterRecords.length > 1 && i != ruleForm.detentionCenterRecords.length - 1"
|
||||
@click="decreaseRecord(i, '拘留所')">−</el-button>
|
||||
<el-button type="primary" @click="addRecord(i, '拘留所')"
|
||||
v-if="ruleForm.detentionCenterRecords.length - 1 == i">+</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 看守所记录 -->
|
||||
<div class="detentionFacility">
|
||||
<div>看守所记录：</div>
|
||||
<div>
|
||||
<div v-for="(item, i) in ruleForm.prison" :key="item.id" class="detentionFacilityArr">
|
||||
<el-form-item :prop="'prison.' + i + '.str'" :rules="rules.str">
|
||||
<el-input v-model="ruleForm.prison[i].str"
|
||||
class="detentionFacilityInput" placeholder="请输入拘留所记录"
|
||||
@input="changeprison(ruleForm.prison[i].str)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button type="primary" v-if="ruleForm.prison.length > 1 && i != ruleForm.prison.length - 1"
|
||||
@click="decreaseRecord(i, '看守所')">−</el-button>
|
||||
<el-button type="primary" @click="addRecord(i, '看守所')" v-if="ruleForm.prison.length - 1 == i">+</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sumbitBtnBOX">
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)" class="sumbitBtn">确认提交</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { reactive, ref, watch, onMounted } from "vue";
|
||||
import { Delete, Download } from '@element-plus/icons';
|
||||
// import { tbGsxtZdryUpdate } from '@/api/zdr.js'
|
||||
const props = defineProps({
|
||||
@ -33,13 +76,28 @@ const props = defineProps({
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const jljl=ref([])
|
||||
const jljl = ref([])
|
||||
const ruleFormRef = ref()
|
||||
const ruleForm = reactive({
|
||||
detentionCenterRecords: [{ id: 0, str: "" }],
|
||||
prison: [{ id: 0, str: "" }],
|
||||
})
|
||||
// 表单校验
|
||||
const rules = reactive({
|
||||
str: [
|
||||
{ required: true, message: '请输入具体信息', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '请最少输入3个字,最多输入20个字', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
// qtbjxx.value = val.qtBjzl
|
||||
}
|
||||
}, { deep: true })
|
||||
onMounted(() => {
|
||||
console.log('组件已挂载')
|
||||
|
||||
})
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// 基本验证：确保背景信息不为空
|
||||
@ -53,6 +111,43 @@ const throwData = () => {
|
||||
});
|
||||
});
|
||||
}
|
||||
// 增加输入记录输入框
|
||||
const addRecord = (val, type) => {
|
||||
if (type == '拘留所') {
|
||||
ruleForm.detentionCenterRecords.push({ id: val })
|
||||
} else {
|
||||
ruleForm.prison.push({ id: val })
|
||||
}
|
||||
|
||||
}
|
||||
// 减少输入记录输入框
|
||||
const decreaseRecord = (val, type) => {
|
||||
if (type == '拘留所') {
|
||||
ruleForm.detentionCenterRecords.splice(val, 1)
|
||||
} else {
|
||||
ruleForm.prison.splice(val, 1)
|
||||
}
|
||||
|
||||
}
|
||||
const changeprison=(value)=>{
|
||||
console.log(value,"jafahfahf");
|
||||
|
||||
}
|
||||
//提交数据校验表单
|
||||
const submitForm = async (formEl) => {
|
||||
console.log(formEl,"formElformEl");
|
||||
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
console.log(valid,fields,"22222222");
|
||||
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
@ -64,6 +159,61 @@ defineExpose({
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.sumbitBtnBOX {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
// background-color: saddlebrown;
|
||||
.sumbitBtn {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.backinfo-container>:nth-child(2) {
|
||||
|
||||
width: 100%;
|
||||
// height: 50px;
|
||||
justify-content: space-between;
|
||||
|
||||
.detentionFacility {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.detentionFacility>:nth-child(1) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.detentionFacility>:nth-child(2) {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detentionFacilityArr {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-form-item {
|
||||
width: 93%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
|
||||
@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>案件信息</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<div class="headSelect">
|
||||
|
||||
<el-button @click="add" type="primary">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #clys="{ row }">
|
||||
<DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
|
||||
</template>
|
||||
<template #cllx="{ row }">
|
||||
<DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
|
||||
</template>
|
||||
<template #clpp="{ row }">
|
||||
<DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
<el-link type="danger" @click="updDictItem(row)">修改</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
|
||||
:dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { identityCardRule } from "@/utils/rules"
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import VehiclDoing from "../component/vehiclDoing.vue";
|
||||
import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryAjxxselectAjxx, tbZdryClxxUpdate } from '@/api/zdr.js'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref({})
|
||||
const addUpd = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
gettbZdryClxxSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'cph',
|
||||
label: '案件编号',
|
||||
}, {
|
||||
prop: 'cllx',
|
||||
label: '案件名称',
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'clys',
|
||||
label: '受案时间',
|
||||
},],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
username: "",
|
||||
ID: ""
|
||||
})
|
||||
const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
|
||||
// 修改数据接口
|
||||
const dataModel = ref()
|
||||
const addMarks = (val) => {
|
||||
const params = {
|
||||
...val,
|
||||
zdrid: listData.value.id,
|
||||
}
|
||||
if (props.showBut && !props.disabled) {
|
||||
if (addUpd.value) {
|
||||
tbZdryClxxAdd(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
else {
|
||||
tbZdryClxxUpdate(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
pageData.tableData.push(val)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// console.log(identityCardRule,"dadad1");
|
||||
|
||||
})
|
||||
// 删除车辆
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除关联车辆',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
tbZdryClxxDelete({ ids: [val] }).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.id != val)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const updDictItem = (val) => {
|
||||
chooseMarksVisible.value = true
|
||||
addUpd.value = false
|
||||
dataModel.value = val
|
||||
}
|
||||
const AddPore = () => {
|
||||
chooseMarksVisible.value = true
|
||||
dataModel.value = {}
|
||||
addUpd.value = true
|
||||
}
|
||||
// 查询车辆
|
||||
const gettbZdryClxxSelectPage = () => {
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
zdrid: listData.value.id
|
||||
}
|
||||
tbGsxtZdryAjxxselectAjxx(promes).then(res => {
|
||||
console.log(res, "案件信息");
|
||||
|
||||
pageData.tableData = res.records
|
||||
})
|
||||
}
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// // 验证：确保标签列表不为空
|
||||
// if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
// throw new Error('请录入车辆信息');
|
||||
// }
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep(.el-form) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 20px 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.headSelect {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 移除冲突样式：不要用 justify-content */
|
||||
|
||||
/* 控制所有 el-form-item 高度和垂直居中 */
|
||||
.form-inline :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ✅ 按钮区域靠右，且不换行 */
|
||||
.form-inline .form-actions {
|
||||
margin-left: auto;
|
||||
/* 推到最右边 */
|
||||
white-space: nowrap;
|
||||
/* 防止按钮换行 */
|
||||
}
|
||||
|
||||
/* 统一按钮样式，增加间距和视觉舒适度 */
|
||||
.form-inline :deep(.el-button) {
|
||||
height: 36px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 按钮之间留出间距（除了第一个） */
|
||||
.form-inline :deep(.el-button:not(:first-child)) {
|
||||
margin-left: 12px;
|
||||
/* 比原来的 8px 更宽松 */
|
||||
}
|
||||
|
||||
// .headClass::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: -2px;
|
||||
// width: 60px;
|
||||
// height: 2px;
|
||||
// background-color: #409eff;
|
||||
// }
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>密切联系人</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<div class="headSelect">
|
||||
<el-form :model="formData" :inline="true" ref="formRef" :rules="rulesForm" class="form-inline">
|
||||
<!-- 姓名 -->
|
||||
<el-form-item label="姓名" prop="username" :rules="[
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
|
||||
]">
|
||||
<el-input v-model="formData.username" placeholder="请输入姓名" style="width: 120px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 身份证号码 -->
|
||||
<el-form-item label="身份证号码" prop="cardID" :rules="[
|
||||
{ required: true, message: '请输入身份证号码', trigger: 'blur' }
|
||||
]">
|
||||
<el-input v-model="formData.ID" placeholder="请输入身份证号码" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 按钮组：统一放在一个 item 中 -->
|
||||
<el-form-item class="form-actions">
|
||||
<el-button type="primary" @click="check">查询</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-button @click="openDialog('新增密切联系人')">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- <template #ryXm="{ row }">
|
||||
<DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
|
||||
</template> -->
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
<el-link type="danger" @click="openDialog('修改密切联系人', row)">修改</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<diaLogForm v-model:visible="dialogVisible" :diaLogRules="diaLogRules" :diaLogRuleForm="diaLogRuleForm"
|
||||
@submit="addPersonOrModifica" :Tips="Tips">
|
||||
</diaLogForm>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { identityCardRule } from "@/utils/rules"
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import diaLogForm from "../components/diaLogForm.vue";
|
||||
import { tbGsxtZdryLxrsaveOrUpdateLxr, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryLxrselectLxrBy, tbZdryClxxUpdate } from '@/api/zdr.js'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const ruleForm = ref({
|
||||
name: '',
|
||||
cardID: '',
|
||||
relation: '',
|
||||
phone: '',
|
||||
})
|
||||
const dialogVisible = ref(false)
|
||||
const listData = ref({})
|
||||
const Tips = ref(false)
|
||||
const addUpd = ref(true)
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'ryXm',
|
||||
label: '人员姓名',
|
||||
|
||||
}, {
|
||||
prop: 'rySfzh',
|
||||
label: '身份证号码',
|
||||
width: 200
|
||||
|
||||
}, {
|
||||
|
||||
prop: 'dygx',
|
||||
label: '关系',
|
||||
}, {
|
||||
|
||||
prop: 'lxrDh',
|
||||
label: '联系电话',
|
||||
width: 120
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
username: "",
|
||||
ID: ""
|
||||
})
|
||||
const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
|
||||
const diaLogRuleForm = reactive([{ prop: 'username', label: '姓名', type: 'input', value: '' },
|
||||
{ prop: 'cardID', label: '身份证号', type: 'input', value: '' },
|
||||
{ prop: 'relation', label: '关系', type: 'input', value: '' },
|
||||
{ prop: 'phone', label: '联系电话', type: 'input', value: '' }
|
||||
])
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
console.log(val, 'listData.value');
|
||||
|
||||
listData.value = val
|
||||
|
||||
}
|
||||
}, { deep: true })
|
||||
// 弹出增加或者修改弹窗
|
||||
const openDialog = (type, formVal) => {
|
||||
dialogVisible.value = true
|
||||
Tips.value = type
|
||||
console.log(formVal, "formVal");
|
||||
|
||||
console.log(dialogVisible.value, "dialogVisible.value")
|
||||
if (type === '新增密切联系人') {
|
||||
diaLogRuleForm.forEach(item => {
|
||||
item.value = ''
|
||||
})
|
||||
} else {
|
||||
diaLogRuleForm[0].value = formVal.ryXm
|
||||
diaLogRuleForm[1].value = formVal.rySfzh
|
||||
diaLogRuleForm[2].value = formVal.dygx
|
||||
diaLogRuleForm[3].value = formVal.lxrDh
|
||||
}
|
||||
|
||||
}
|
||||
// 增加或修改数据接口
|
||||
const dataModel = ref()
|
||||
const addPersonOrModifica = async (val) => {
|
||||
console.log('dafafaf', val)
|
||||
let params = {
|
||||
id: listData.value.id
|
||||
}
|
||||
val.forEach(item => {
|
||||
switch (item.label) {
|
||||
case '姓名':
|
||||
params.ryXm = item.value
|
||||
break
|
||||
case '身份证号':
|
||||
params.rySfzh = item.value
|
||||
break
|
||||
case '关系':
|
||||
params.dygx = item.value
|
||||
break
|
||||
case '联系电话':
|
||||
params.lxrDh = item.value
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
console.log(params, "fafafafaff");
|
||||
|
||||
if (props.showBut && !props.disabled) {
|
||||
const res = await tbGsxtZdryLxrsaveOrUpdateLxr(params)
|
||||
console.log(res, "联系人增加res");
|
||||
|
||||
// if (type) {
|
||||
|
||||
// if (res.code == 200) {
|
||||
// gettbZdryClxxSelectPage()
|
||||
// proxy.$message({
|
||||
// message: '密切联系人添加成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// } else {
|
||||
// proxy.$message({
|
||||
// message: '密切联系人添加失败',
|
||||
// type: 'error'
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
// } else {
|
||||
// if (res.code == 200) {
|
||||
// gettbZdryClxxSelectPage()
|
||||
// proxy.$message({
|
||||
// message: '密切联系人添加成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// } else {
|
||||
// proxy.$message({
|
||||
// message: '密切联系人添加失败',
|
||||
// type: 'error'
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
} else {
|
||||
pageData.tableData.push(val)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// console.log(identityCardRule,"dadad1");
|
||||
|
||||
})
|
||||
// 删除车辆
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除关联车辆',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
tbZdryClxxDelete({ ids: [val] }).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.id != val)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const updDictItem = (val) => {
|
||||
chooseMarksVisible.value = true
|
||||
addUpd.value = false
|
||||
dataModel.value = val
|
||||
}
|
||||
const AddPore = () => {
|
||||
chooseMarksVisible.value = true
|
||||
dataModel.value = {}
|
||||
addUpd.value = true
|
||||
}
|
||||
// 初始化密切联系人
|
||||
const gettbZdryClxxSelectPage = () => {
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
zdrid: listData.value.id
|
||||
}
|
||||
tbGsxtZdryLxrselectLxrBy(promes).then(res => {
|
||||
|
||||
|
||||
pageData.tableData = res
|
||||
console.log(pageData.tableData, "表格原生数据");
|
||||
|
||||
})
|
||||
}
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// // 验证：确保标签列表不为空
|
||||
// if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
// throw new Error('请录入车辆信息');
|
||||
// }
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.headSelect {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
::v-deep(.el-form) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 移除冲突样式：不要用 justify-content */
|
||||
|
||||
/* 控制所有 el-form-item 高度和垂直居中 */
|
||||
.form-inline :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ✅ 按钮区域靠右，且不换行 */
|
||||
.form-inline .form-actions {
|
||||
margin-left: auto;
|
||||
/* 推到最右边 */
|
||||
white-space: nowrap;
|
||||
/* 防止按钮换行 */
|
||||
}
|
||||
|
||||
/* 统一按钮样式，增加间距和视觉舒适度 */
|
||||
.form-inline :deep(.el-button) {
|
||||
height: 36px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 按钮之间留出间距（除了第一个） */
|
||||
.form-inline :deep(.el-button:not(:first-child)) {
|
||||
margin-left: 12px;
|
||||
/* 比原来的 8px 更宽松 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .headClass::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: -2px;
|
||||
// width: 60px;
|
||||
// height: 2px;
|
||||
// background-color: #409eff;
|
||||
// }
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>全要素布控</h3>
|
||||
|
||||
</div>
|
||||
<div class="marginBox">
|
||||
<div>身份证号码：{{ listData.rySfzh }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
|
||||
|
||||
<div>手机号码：{{ listData.ryLxdh?.[0] }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span>
|
||||
<div> {{ listData.ryLxdh?.[1] }}<span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
|
||||
</div>
|
||||
<div>车牌号码：{{ listData.clHm }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const status = ref(false)
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
|
||||
}
|
||||
}, { deep: true })
|
||||
onMounted(() => {
|
||||
console.log('Deployment 组件已挂载！')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.marginBox {
|
||||
span {
|
||||
margin-left: 10px;
|
||||
color: #ff4040;
|
||||
}
|
||||
|
||||
&>:nth-child(1) {
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&>:nth-child(2) {
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&>:nth-child(3) {
|
||||
width: 210px;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>动态轨迹</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
</div>
|
||||
<div class="headSelect">
|
||||
<el-select v-model="value" placeholder="身份证号码" style="width: 100px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-select v-model="value" placeholder="请输入内容" style="width: 240px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<div class="demo-datetime-picker">
|
||||
<div class="block">
|
||||
<el-date-picker v-model="value2" type="datetimerange" start-placeholder="Start date"
|
||||
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
|
||||
time-format="A hh:mm:ss" />
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" @click="check">查询</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</div>
|
||||
<div class="mapBox">地图</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref('')
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '身份证号码',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '港澳台通行证',
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep(.el-form) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.headSelect {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
padding:0 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.mapBox{
|
||||
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-color: rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -53,6 +53,7 @@ const addUpd = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
console.log(listData.value, 'listData.value')
|
||||
gettbZdryClxxSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>走访记录</h3>
|
||||
<!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
|
||||
|
||||
</div>
|
||||
<div class="headSelect">
|
||||
|
||||
<el-button @click="add" type="primary">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #clys="{ row }">
|
||||
<DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
|
||||
</template>
|
||||
<template #cllx="{ row }">
|
||||
<DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
|
||||
</template>
|
||||
<template #clpp="{ row }">
|
||||
<DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
<el-link type="danger" @click="updDictItem(row)">修改</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
|
||||
:dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { identityCardRule } from "@/utils/rules"
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import VehiclDoing from "../component/vehiclDoing.vue";
|
||||
import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryZfjlselectZfjl, tbZdryClxxUpdate } from '@/api/zdr.js'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref({})
|
||||
const addUpd = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
|
||||
|
||||
gettbZdryClxxSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'cph',
|
||||
width: 150,
|
||||
label: '走访民警/辅警',
|
||||
}, {
|
||||
prop: 'cllx',
|
||||
label: '走访方式',
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'clys',
|
||||
label: '走访时间',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
label: '走访地址',
|
||||
},
|
||||
{
|
||||
showSolt: true,
|
||||
prop: 'clpp',
|
||||
label: '走访情况',
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
username: "",
|
||||
ID: ""
|
||||
})
|
||||
const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
|
||||
// 修改数据接口
|
||||
const dataModel = ref()
|
||||
const addMarks = (val) => {
|
||||
const params = {
|
||||
...val,
|
||||
zdrid: listData.value.id,
|
||||
}
|
||||
if (props.showBut && !props.disabled) {
|
||||
if (addUpd.value) {
|
||||
tbZdryClxxAdd(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
else {
|
||||
tbZdryClxxUpdate(params).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
pageData.tableData.push(val)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
})
|
||||
// 删除车辆
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除关联车辆',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
tbZdryClxxDelete({ ids: [val] }).then(res => {
|
||||
gettbZdryClxxSelectPage()
|
||||
proxy.$message({
|
||||
message: '关联车辆删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.id != val)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const updDictItem = (val) => {
|
||||
chooseMarksVisible.value = true
|
||||
addUpd.value = false
|
||||
dataModel.value = val
|
||||
}
|
||||
const AddPore = () => {
|
||||
chooseMarksVisible.value = true
|
||||
dataModel.value = {}
|
||||
addUpd.value = true
|
||||
}
|
||||
// 查询车辆
|
||||
const gettbZdryClxxSelectPage = () => {
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 20,
|
||||
zdrid: listData.value.id
|
||||
}
|
||||
tbGsxtZdryZfjlselectZfjl(promes).then(res => {
|
||||
console.log(res, "走访记录");
|
||||
pageData.tableData = res
|
||||
})
|
||||
}
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// // 验证：确保标签列表不为空
|
||||
// if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
// throw new Error('请录入车辆信息');
|
||||
// }
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep(.el-form) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 20px 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.headSelect {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 移除冲突样式：不要用 justify-content */
|
||||
|
||||
/* 控制所有 el-form-item 高度和垂直居中 */
|
||||
.form-inline :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ✅ 按钮区域靠右，且不换行 */
|
||||
.form-inline .form-actions {
|
||||
margin-left: auto;
|
||||
/* 推到最右边 */
|
||||
white-space: nowrap;
|
||||
/* 防止按钮换行 */
|
||||
}
|
||||
|
||||
/* 统一按钮样式，增加间距和视觉舒适度 */
|
||||
.form-inline :deep(.el-button) {
|
||||
height: 36px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 按钮之间留出间距（除了第一个） */
|
||||
.form-inline :deep(.el-button:not(:first-child)) {
|
||||
margin-left: 12px;
|
||||
/* 比原来的 8px 更宽松 */
|
||||
}
|
||||
|
||||
// .headClass::after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// bottom: -2px;
|
||||
// width: 60px;
|
||||
// height: 2px;
|
||||
// background-color: #409eff;
|
||||
// }
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user