zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-09-09 09:32:13 +08:00
parent 00b2c8bf16
commit adbc74e5b0
13 changed files with 2237 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/api/zdr.js Normal file
View File

@ -0,0 +1,61 @@
import request from "@/utils/request";
const api = "/mosty-api/mosty-gsxt";
// 群体性质新增
export const tbGsxtZdrySelectVoById = (params) => {
return request({
url: api + `/tbGsxtZdry/getZyryById`,
method: "get",
params
});
}
// 修改
export const tbGsxtZdryUpdate = (data) => {
return request({
url: api + `/tbGsxtZdry/update`,
method: "post",
data,
});
}
// 重点人员车辆信息-（新增）
export const tbZdryClxxAdd = (data) => {
return request({
url: api + `/tbZdry/clxx/add`,
method: "post",
data,
});
}
// 重点人员车辆信息-（批量新增）
export const tbZdryClxxBatchAdd = (data) => {
return request({
url: api + `/tbZdry/clxx/batchAdd`,
method: "post",
data,
});
}
// 重点人员车辆信息-（删除）
export const tbZdryClxxDelete = (data) => {
return request({
url: api + `/tbZdry/clxx/delete`,
method: "post",
data,
});
}
// 重点人员车辆信息-（查询）
export const tbZdryClxxSelectPage = (params) => {
return request({
url: api + `/tbZdry/clxx/selectPage`,
method: "get",
params,
});
}
// 重点人员车辆信息-（修改）
export const tbZdryClxxUpdate = (data) => {
return request({
url: api + `/tbZdry/clxx/update`,
method: "post",
data,
});
}

30
src/components/ChooseList/ChooseMarks/index.vue
View File

@ -173,14 +173,25 @@ const getListData = () => {
});
};
//列表回显
//列表回显 - 优化版，确保已选择数据正确回显
function multipleUser() {
if (!multipleUserRef.value || !tableData.value || tableData.value.length === 0) {
return;
}
// 先清除所有选中状态
tableData.value.forEach((item) => {
multipleUserRef.value.toggleRowSelection(item, false);
});
// 再根据roleIds重新设置选中状态
if (props.roleIds && Array.isArray(props.roleIds) && props.roleIds.length > 0) {
tableData.value.forEach((item) => {
if (props.roleIds.some((id) => id == item.id)) {
multipleUserRef.value.toggleRowSelection(item, true);
}
});
}
}
const handleFilter = () => {
@ -200,13 +211,28 @@ const handleSelectionChange = (val) => {
}
};
// 监听弹窗打开状态，打开时重新加载数据
watch(
() => props.modelValue,
(val) => {
if (val) handleFilter();
if (val) {
handleFilter();
}
},
{ immediate: true }
);
// 监听roleIds变化，确保数据回显正确
watch(
() => props.roleIds,
(newRoleIds) => {
// 使用setTimeout确保在表格数据加载完成后再进行选择
setTimeout(() => {
multipleUser();
}, 100);
},
{ deep: true }
);
</script>
<style lang="scss" scoped>

3
src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/components/addForm.vue
View File

@ -78,9 +78,8 @@ const init = (type, row) => {
} else {
portrayal.value = true
if (type == 'edit') {
disabled.value = false
showBut.value = true
disabled.value = false
title.value = '修改'
} else {
disabled.value = true

235
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/component/vehiclDoing.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<el-dialog :title="titleValue" width="800px" :model-value="modelValue" append-to-body @close="closed">
<el-form ref="historyForm" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
<el-form-item label="车牌号" prop="cph">
<el-input v-model="ruleForm.cph" placeholder="请输入车牌号" />
</el-form-item>
<el-form-item label="车辆识别码" prop="clsbm">
<el-input v-model="ruleForm.clsbm" placeholder="请输入车辆识别码" />
</el-form-item>
<el-form-item label="车辆型号" prop="cllx">
<el-select v-model="ruleForm.cllx" placeholder="请选择车辆型号">
<el-option :label="item.zdmc" :value="item.dm" v-for="(item,index) in dict.D_BZ_CLLX" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆颜色" prop="clys">
<el-select v-model="ruleForm.clys" placeholder="请选择车辆颜色">
<el-option :label="item.zdmc" :value="item.dm" v-for="(item,index) in dict.D_BZ_CLYS" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆品牌" prop="clpp">
<el-select v-model="ruleForm.clpp" placeholder="请选择车辆品牌">
<el-option :label="item.zdmc" :value="item.dm" v-for="(item,index) in dict.D_BZ_CLPP" :key="index"></el-option>
</el-select>
</el-form-item>
</el-form>
<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 { ref, onMounted, reactive, watch, getCurrentInstance } from "vue";
import { generateRandom10Digits } from '@/utils/tools'
const { proxy } = getCurrentInstance()
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
titleValue: {
type: String,
default: "关联车辆"
},
data: {
type: Object,
default: () => { }
}, dict: {
type: Object,
default: () => { }
}
});
const emits = defineEmits(["update:modelValue", "comfirm"]);
const historyForm = ref(null)
const ruleForm = ref({})
const rules = reactive({
cph: [
{ required: true, message: '请输入车牌号', trigger: 'blur' },
],
});
const onComfirm = () => {
const promes = {...ruleForm.value,
id: ruleForm.value.id ? ruleForm.value.id : generateRandom10Digits(),
}
console.log(promes);
emits("comfirm", { ...promes });
closed()
}
watch(() => props.modelValue, (val) => {
ruleForm.value = props.data
},{deep: true})
const closed = () => {
ruleForm.value = {}
emits("update:modelValue", false);
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
.tabBoxRadio .el-checkbox__inner {
border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
display: none;
}
.file-attachment-section {
margin-top: 15px;
}
.section-title {
font-size: 14px;
font-weight: 500;
color: #303133;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #ebeef5;
}
.file-list-container {
max-height: 100px;
overflow-y: auto;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #ffffff;
margin-bottom: 10px;
}
/* 自定义滚动条样式 */
.file-list-container::-webkit-scrollbar {
width: 6px;
}
.file-list-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.file-list-container::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.file-list-container::-webkit-scrollbar-thumb:hover {
background: #909399;
}
.empty-file-list {
padding: 20px;
text-align: center;
color: #909399;
font-size: 12px;
}
.file-list {
padding: 5px;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
margin-bottom: 2px;
background-color: #f8f9fa;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}
.file-item:hover {
background-color: #e6f7ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.file-info {
flex: 1;
display: flex;
align-items: center;
gap: 15px;
min-width: 0;
}
.file-name {
flex: 1;
font-size: 12px;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
font-size: 11px;
color: #909399;
min-width: 60px;
}
.file-time {
font-size: 11px;
color: #909399;
}
.file-actions {
display: flex;
align-items: center;
gap: 5px;
margin-left: 10px;
}
.file-actions .el-button {
padding: 0 5px;
margin: 0;
color: #606266;
transition: color 0.3s ease;
}
.file-actions .el-button:hover {
color: #409eff;
}
.delete-btn:hover {
color: #f56c6c !important;
}
.upload-btn-container {
display: flex;
justify-content: center;
margin-top: 10px;
}
.butHandle {
display: flex;
justify-content: space-between;
align-items: center;
}
::v-deep .el-range-input {
color: #000 !important;
}
</style>

371
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/components copy/addForm.vue Normal file
View File

@ -0,0 +1,371 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">{{ title }}重点人管理</span>
<div>
<el-button type="primary" size="small" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="form_cnt">
<FormMessage :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="100px" ref="elform"
:rules="rules"></FormMessage>
<div class="ml50 mr50">
<span class="mr10">人员标签模型 : </span><el-button type="primary" v-if="!disabled"
@click="chooseMarksVisible = true">选择</el-button>
</div>
<div class="boxlist ml50 mr50">
<MyTable :tableData="listQuery.bqList" :tableColumn="tableDate.tableColumn" :key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger" :controlsWidth="tableDate.controlsWidth">
<template #bqLb="{ row }">
<DictTag :value="row.bqLb" :tag="false" :options="props.dic.D_GS_BQ_LB" />
</template>
<template #bqLx="{ row }">
<DictTag :value="row.bqLx" :tag="false" :options="props.dic.D_GS_BQ_LX" />
</template>
<template #bqZl="{ row }">
<DictTag :value="row.bqZl" :tag="false" :options="props.dic.D_GS_BQ_ZL" />
</template>
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.bqId)">删除</el-link>
</template>
</MyTable>
</div>
<!-- 选择审核人 -->
<div class="ww100 mt20 ml50 mr50">
<el-steps direction="vertical" :active="listQuery.wccz" space="500" finish-status="success">
<el-step title="发起申请">
<template #description>
<div class="flex align-center ww100 mt10 mb20">
<el-input v-model="listQuery.sqrXm" readonly class="ww20"></el-input>
<el-input v-model="listQuery.sqrSsbmmc" readonly class="ww20 ml10 mr10"></el-input>
<span class="f12" style="color: #333333">
备注发起人和部门根据登陆人自动填写</span>
</div>
</template>
</el-step>
<el-step title="审核确认">
<template #description>
<div class="flex align-center ww100 mt10 mb20 depBox">
<span class="mr4">审核部门 : </span>
<MOSTY.Department :isAll="true" @getDepValue="getShdep" v-model="listQuery.shSsbmdm" clearable :placeholder="listQuery.shSsbmmc ? listQuery.shSsbmmc : ''" />
</div>
</template>
</el-step>
<el-step title="审批确认">
<template #description>
<div class="flex align-center ww100 mt10 mb20 depBox">
<span lass="mr4">审批部门 : </span>
<MOSTY.Department :isAll="true" @getDepValue="getSPdep" v-model="listQuery.spSsbmdm" clearable :placeholder="listQuery.spSsbmmc ? listQuery.spSsbmmc : ''" />
</div>
</template>
</el-step>
</el-steps>
</div>
</div>
</div>
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>
<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import {
ref,
defineExpose,
reactive,
onMounted,
defineEmits,
getCurrentInstance,
watch
} from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
dic: Object
});
const { proxy } = getCurrentInstance();
const roleIds = ref([]);
const chooseMarksVisible = ref(false);
const dialogForm = ref(false); //弹窗
const pcsList = ref([]);
const rules = reactive({
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
...rule.identityCardRule({ validator: true },'rySfzh'), //身份证校验
...rule.phoneRule({ validator: true }, "ryLxdh"), // 是否必填 是否进行校验,
rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
ryLxdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
ryMz: [{ required: true, message: "请选择民族", trigger: "change" }],
ryCsrq: [{ required: true, message: "请选择出生日期", trigger: "change" }],
ryJg: [{ required: true, message: "请选择籍贯", trigger: "change" }],
zdrRyjb: [{ required: true, message: "请选择人员级别", trigger: "change" }],
zdrYjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }]
});
const listQuery = ref({}); //表单
const formData = ref([]);
watch(() => props.dic,(val) => {
formData.value = [
{ label: "姓名", prop: "ryXm", type: "input" },
{
label: "性别",
prop: "ryXb",
type: "select",
options: props.dic.D_BZ_XB
},
{
label: "民族",
prop: "ryMz",
type: "select",
options: props.dic.D_BZ_MZ
},
{ label: "身份证号", prop: "rySfzh", type: "input" },
{ label: "联系电话", prop: "ryLxdh", type: "input" },
{ label: "出生日期", prop: "ryCsrq", type: "date" },
{
label: "籍贯",
prop: "ryJg",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{
label: "人员级别",
prop: "zdrRyjb",
type: "select",
options: props.dic.D_GS_ZDR_RYJB
},
{
label: "预警等级",
prop: "zdrYjdj",
type: "select",
options: props.dic.D_GS_ZDR_YJDJ
},
{
label: "户籍地区划",
prop: "hjdQh",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{ label: "户籍地详址", prop: "hjdXz", type: "input" },
{
label: "户籍地派出所",
prop: "hjdPcsdm",
type: "select",
options: pcsList
},
{
label: "现住地区划",
prop: "xzdQh",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{ label: "现住地详址", prop: "xzdXz", type: "input" },
{
label: "现住地派出所",
prop: "xzdPcsdm",
type: "select",
options: pcsList
},
{ label: "管辖单位", prop: "gxSsbmdm",depMc:'gxSsbmmc', type: "department" },
{ label: "诉求单位", prop: "sqSsbmdm",depMc:'sqSsbmmc', type: "department" },
{ label: "责任单位", prop: "zrSsbmdm",depMc:'zrSsbmmc', type: "department" },
{
label: "所属警种",
prop: "zdrSsjz",
type: "select",
options: props.dic.D_GS_BK_SSJZ
},
{
label: "涉及警种",
prop: "zdrSjjz",
type: "select",
options: props.dic.D_GS_BK_SSJZ,
multiple: true
},
{ label: "管控民警姓名", prop: "gkMjXm", type: "input" },
{ label: "管控民警警号", prop: "gkMjJh", type: "input" },
{ label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" },
{
label: "处置状态",
prop: "zdrCzzt",
type: "select",
options: props.dic.D_GS_ZDR_CZZT
},
{ label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
{ label: "入库结束时间", prop: "zdrRkjssj", type: "datetime" }
];
},
{ immediate: true, deep: true }
);
const tableDate = reactive({
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
controlsWidth: 90, //操作栏宽度
keyCount: 0,
tableColumn: [
{ label: "标签名称", prop: "bqMc" },
{ label: "标签代码", prop: "bqDm" },
{ label: "标签种类", prop: "bqZl", showSolt: true },
{ label: "标签类型", prop: "bqLx", showSolt: true },
{ label: "标签类别", prop: "bqLb", showSolt: true }
]
});
const loading = ref(false);
const elform = ref();
const title = ref("");
const showInfo = ref(false);
const disabled = ref(false);
onMounted(() => {
chooseDep();
});
const chooseDep = () => {
qcckPost({ orgLevel: 40 }, "/mosty-base/deptFeign/queryListByDept").then(
(res) => {
pcsList.value = res.map((item) => {
return { zdmc: item.orgName, dm: item.orgCode, value: item.orgCode };
});
}
);
};
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
title.value = type == "add" ? "新增" : type == "detail" ? "详情" : "编辑";
disabled.value = type == "detail" ? true : false;
tableDate.tableConfiger.haveControls = type == "detail" ? false : true;
if (type == "add") {
listQuery.value.sqrXm = getItem("USERNAME");
listQuery.value.bkfqrSfzh = getItem("idEntityCard");
listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
}
setTimeout(() => {
showInfo.value = true;
}, 5);
if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
qcckGet({}, "/mosty-gsxt/tbGsxtZdry/selectVoById/" + id).then((res) => {
listQuery.value = res;
listQuery.value.zdrSjjz = listQuery.value.zdrSjjz.split(",");
tableDate.bqList = res.bqList;
listQuery.value.sqrXm = getItem("USERNAME");
listQuery.value.bkfqrSfzh = getItem("idEntityCard");
listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
});
};
// 选择标签
const choosed = (val) => {
listQuery.value.bqList = val.map((v) => {
return { bqZl: v.bqLb, bqId: v.id, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm };
});
roleIds.value = val.map((v) => v.id);
};
// 删除
const delDictItem = (bqId) => {
listQuery.value.bqList = listQuery.value.bqList.filter((v) => v.bqId != bqId);
tableDate.keyCount++;
};
// 提交
const submit = () => {
elform.value.submit((data) => {
console.log("xxxxx");
console.log(data);
data.zdrSjjz = data.zdrSjjz.join(",");
let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtZdry/save" : "/mosty-gsxt/tbGsxtZdry/update";
let params = { ...data };
if (params.hjdPcsdm) {
let obj = pcsList.value.find((v) => v.dm == params.hjdPcsdm);
params.hjdPcsmc = obj ? obj.zdmc : "";
}
if (params.xzdPcsdm) {
let obj1 = pcsList.value.map((v) => v.dm == params.xzdPcsdm);
params.xzdPcsmc = obj1 ? obj1.zdmc : "";
}
loading.value = true;
qcckPost(params, url).then(() => {
loading.value = false;
proxy.$message({ type: "success", message: title.value + "成功" });
emit("updateDate");
close();
}).catch(() => {
loading.value = false;
});
});
};
const getShdep = (val) =>{
listQuery.value.shSsbmmc = val ? val.orgName : ''
}
const getSPdep = (val) =>{
listQuery.value.spSsbmmc = val ? val.orgName : ''
}
// 关闭
const close = () => {
listQuery.value = {};
dialogForm.value = false;
loading.value = false;
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
color: #0072ff;
background: rgba(0, 114, 255, 0.3);
}
.boxlist {
width: calc(99% - 50px);
margin-top: 10px;
overflow: hidden;
}
.depBox {
border: 1px solid #e9e9e9;
width: 305px;
padding: 0 0 0 4px;
border-radius: 4px;
::v-deep .el-input__inner {
border: none;
}
::v-deep .el-cascader .el-input.is-focus .el-input__inner {
border-color: transparent !important;
}
::v-deep .el-input__inner:focus {
box-shadow: none;
}
::v-deep .el-input.is-disabled .el-input__inner {
border-color: transparent !important;
}
}
</style>

228
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/components copy/zxsForm.vue Normal file
View File

@ -0,0 +1,228 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">流线索</span>
<div>
<el-button type="primary" :loading="loading" @click="submit">保存</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 #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="fjdz" />
</div>
</div>
</template>
</FormMessage>
<el-divider content-position="left"><span class="mr20">相关人员</span>
</el-divider>
<MyTable :tableData="pageForm.tableData" :tableColumn="pageForm.tableColumn" :tableHeight="pageForm.tableHeight"
:key="pageForm.keyCount" :tableConfiger="pageForm.tableConfiger" :controlsWidth="pageForm.controlsWidth">
<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>
</template>
</MyTable>
</div>
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost } 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: "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: "ssbmdm", type: "department" }
]);
const fjdz = ref();
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const pageForm = reactive({
tableData: [],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false,
haveControls: false
},
controlsWidth: 220,
tableColumn: [
{ label: "姓名", prop: "xm" },
{ label: "性别", prop: "xb", showSolt: true },
{ label: "身份证号", prop: "sfzh" },
{ label: "户籍地", prop: "hjdz" },
{ label: "户籍地派出所", prop: "hjdpcs" },
{ label: "标签", prop: "bqList", showSolt: true }
]
});
onMounted(() => {
tabHeightFn();
});
// 初始化数据
const init = (list) => {
fjdz.value = [];
tabHeightFn();
dialogForm.value = true;
pageForm.tableData = list.map((it) => {
return {
xm: it.ryXm,
xb: it.ryXb,
sfzh: it.rySfzh,
hjdz: it.xzdXz,
hjdpcs: it.hjdPcsmc,
hjdpcsdm: it.hjdPcsdm,
bqList: it.bqList || []
};
});
pageForm.keyCount++;
};
// 提交
const submit = () => {
elform.value.submit((data) => {
let params = { ...data, ryList: pageForm.tableData, cjLx: "0" };
params.fjdz = fjdz.value.length > 0 ? fjdz.value.join(",") : "";
loading.value = true;
qcckPost(params, "/mosty-gsxt/qbcj/add")
.then((res) => {
loading.value = false;
proxy.$message({ type: "success", message: "成功" });
emit("change");
close();
})
.catch(() => {
loading.value = false;
});
});
};
// 关闭
const close = () => {
fjdz.value = [];
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>
@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;
}
::v-deep .avatar-uploader {
display: flex;
align-items: center;
}
::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>

555
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/components/addForm.vue
View File

@ -3,327 +3,163 @@
<div class="head_box">
<span class="title">{{ title }}重点人管理</span>
<div>
<el-button type="primary" size="small" v-if="!disabled" :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">
<FormMessage :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="100px" ref="elform"
:rules="rules"></FormMessage>
<div class="ml50 mr50">
<span class="mr10">人员标签模型 : </span><el-button type="primary" v-if="!disabled"
@click="chooseMarksVisible = true">选择</el-button>
<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>
</ul>
</div>
<div class="boxlist ml50 mr50">
<MyTable :tableData="listQuery.bqList" :tableColumn="tableDate.tableColumn" :key="tableDate.keyCount"
:tableConfiger="tableDate.tableConfiger" :controlsWidth="tableDate.controlsWidth">
<template #bqLb="{ row }">
<DictTag :value="row.bqLb" :tag="false" :options="props.dic.D_GS_BQ_LB" />
</template>
<template #bqLx="{ row }">
<DictTag :value="row.bqLx" :tag="false" :options="props.dic.D_GS_BQ_LX" />
</template>
<template #bqZl="{ row }">
<DictTag :value="row.bqZl" :tag="false" :options="props.dic.D_GS_BQ_ZL" />
</template>
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.bqId)">删除</el-link>
</template>
</MyTable>
</div>
<!-- 选择审核人 -->
<div class="ww100 mt20 ml50 mr50">
<el-steps direction="vertical" :active="listQuery.wccz" space="500" finish-status="success">
<el-step title="发起申请">
<template #description>
<div class="flex align-center ww100 mt10 mb20">
<el-input v-model="listQuery.sqrXm" readonly class="ww20"></el-input>
<el-input v-model="listQuery.sqrSsbmmc" readonly class="ww20 ml10 mr10"></el-input>
<span class="f12" style="color: #333333">
备注发起人和部门根据登陆人自动填写</span>
</div>
</template>
</el-step>
<el-step title="审核确认">
<template #description>
<div class="flex align-center ww100 mt10 mb20 depBox">
<span class="mr4">审核部门 : </span>
<MOSTY.Department :isAll="true" @getDepValue="getShdep" v-model="listQuery.shSsbmdm" clearable :placeholder="listQuery.shSsbmmc ? listQuery.shSsbmmc : ''" />
</div>
</template>
</el-step>
<el-step title="审批确认">
<template #description>
<div class="flex align-center ww100 mt10 mb20 depBox">
<span lass="mr4">审批部门 : </span>
<MOSTY.Department :isAll="true" @getDepValue="getSPdep" v-model="listQuery.spSsbmdm" clearable :placeholder="listQuery.spSsbmmc ? listQuery.spSsbmmc : ''" />
</div>
</template>
</el-step>
</el-steps>
<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>
</div>
</div>
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
<!-- <ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" /> -->
</template>
<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import {
ref,
defineExpose,
reactive,
onMounted,
defineEmits,
getCurrentInstance,
watch
} from "vue";
import { tbGsxtZdrySelectVoById } from "@/api/zdr.js";
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";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
dic: Object
});
const { proxy } = getCurrentInstance();
const roleIds = ref([]);
const chooseMarksVisible = ref(false);
const dialogForm = ref(false); //弹窗
const pcsList = ref([]);
const rules = reactive({
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
...rule.identityCardRule({ validator: true },'rySfzh'), //身份证校验
...rule.phoneRule({ validator: true }, "ryLxdh"), // 是否必填 是否进行校验,
rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
ryLxdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
ryMz: [{ required: true, message: "请选择民族", trigger: "change" }],
ryCsrq: [{ required: true, message: "请选择出生日期", trigger: "change" }],
ryJg: [{ required: true, message: "请选择籍贯", trigger: "change" }],
zdrRyjb: [{ required: true, message: "请选择人员级别", trigger: "change" }],
zdrYjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }]
});
const listQuery = ref({}); //表单
const formData = ref([]);
watch(() => props.dic,(val) => {
formData.value = [
{ label: "姓名", prop: "ryXm", type: "input" },
{
label: "性别",
prop: "ryXb",
type: "select",
options: props.dic.D_BZ_XB
},
{
label: "民族",
prop: "ryMz",
type: "select",
options: props.dic.D_BZ_MZ
},
{ label: "身份证号", prop: "rySfzh", type: "input" },
{ label: "联系电话", prop: "ryLxdh", type: "input" },
{ label: "出生日期", prop: "ryCsrq", type: "date" },
{
label: "籍贯",
prop: "ryJg",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{
label: "人员级别",
prop: "zdrRyjb",
type: "select",
options: props.dic.D_GS_ZDR_RYJB
},
{
label: "预警等级",
prop: "zdrYjdj",
type: "select",
options: props.dic.D_GS_ZDR_YJDJ
},
{
label: "户籍地区划",
prop: "hjdQh",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{ label: "户籍地详址", prop: "hjdXz", type: "input" },
{
label: "户籍地派出所",
prop: "hjdPcsdm",
type: "select",
options: pcsList
},
{
label: "现住地区划",
prop: "xzdQh",
type: "select",
options: props.dic.D_BZ_XZQHDM
},
{ label: "现住地详址", prop: "xzdXz", type: "input" },
{
label: "现住地派出所",
prop: "xzdPcsdm",
type: "select",
options: pcsList
},
{ label: "管辖单位", prop: "gxSsbmdm",depMc:'gxSsbmmc', type: "department" },
{ label: "诉求单位", prop: "sqSsbmdm",depMc:'sqSsbmmc', type: "department" },
{ label: "责任单位", prop: "zrSsbmdm",depMc:'zrSsbmmc', type: "department" },
{
label: "所属警种",
prop: "zdrSsjz",
type: "select",
options: props.dic.D_GS_BK_SSJZ
},
{
label: "涉及警种",
prop: "zdrSjjz",
type: "select",
options: props.dic.D_GS_BK_SSJZ,
multiple: true
},
{ label: "管控民警姓名", prop: "gkMjXm", type: "input" },
{ label: "管控民警警号", prop: "gkMjJh", type: "input" },
{ label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" },
{
label: "处置状态",
prop: "zdrCzzt",
type: "select",
options: props.dic.D_GS_ZDR_CZZT
},
{ label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
{ label: "入库结束时间", prop: "zdrRkjssj", type: "datetime" }
];
},
{ immediate: true, deep: true }
);
const tableDate = reactive({
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
},
controlsWidth: 90, //操作栏宽度
keyCount: 0,
tableColumn: [
{ label: "标签名称", prop: "bqMc" },
{ label: "标签代码", prop: "bqDm" },
{ label: "标签种类", prop: "bqZl", showSolt: true },
{ label: "标签类型", prop: "bqLx", showSolt: true },
{ label: "标签类别", prop: "bqLb", showSolt: true }
]
});
const loading = ref(false);
const elform = ref();
const title = ref("");
const showInfo = ref(false);
const disabled = ref(false);
onMounted(() => {
chooseDep();
});
const chooseDep = () => {
qcckPost({ orgLevel: 40 }, "/mosty-base/deptFeign/queryListByDept").then(
(res) => {
pcsList.value = res.map((item) => {
return { zdmc: item.orgName, dm: item.orgCode, value: item.orgCode };
});
}
);
};
const disabled = ref(false)
const showBut = ref(false)
const listQuery = ref({});
const butShow=ref(false)
const title = ref('新增')
// 初始化数据
const init = (type, row) => {
dialogForm.value = true;
title.value = type == "add" ? "新增" : type == "detail" ? "详情" : "编辑";
disabled.value = type == "detail" ? true : false;
tableDate.tableConfiger.haveControls = type == "detail" ? false : true;
if (type == "add") {
listQuery.value.sqrXm = getItem("USERNAME");
listQuery.value.bkfqrSfzh = getItem("idEntityCard");
listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
if (type == 'add') {
butShow.value=true
title.value = '新增'
disabled.value = false
showBut.value=false
} else {
butShow.value=false
tbGsxtZdrySelectVoById({id:row.id}).then(res => {
listQuery.value = res
})
if (type == 'edit') {
showBut.value = true
disabled.value = false
title.value = '编辑'
} else {
disabled.value = true
showBut.value = false
title.value = '详情'
}
}
setTimeout(() => {
showInfo.value = true;
}, 5);
if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
qcckGet({}, "/mosty-gsxt/tbGsxtZdry/selectVoById/" + id).then((res) => {
listQuery.value = res;
listQuery.value.zdrSjjz = listQuery.value.zdrSjjz.split(",");
tableDate.bqList = res.bqList;
listQuery.value.sqrXm = getItem("USERNAME");
listQuery.value.bkfqrSfzh = getItem("idEntityCard");
listQuery.value.sqrSsbmmc = getItem("deptId")[0].deptName;
listQuery.value.sqrSsbmdm = getItem("deptId")[0].deptCode;
const activeSection = ref('info-section')
const rightBox = ref(null)
// 滚动到指定区域
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId);
if (element && rightBox.value) {
// 计算需要滚动的距离
const elementTop = element.offsetTop;
rightBox.value.scrollTo({
top: elementTop - 150, // 减去一些偏移量，让内容更好看
behavior: 'smooth' // 平滑滚动
});
};
activeSection.value = sectionId;
}
}
// 选择标签
const choosed = (val) => {
listQuery.value.bqList = val.map((v) => {
return { bqZl: v.bqLb, bqId: v.id, bqLx: v.bqLx, bqLb: v.bqLb, bqMc: v.bqMc, bqDm: v.bqDm };
// 监听滚动，更新当前激活的锚点
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'
];
for (let i = sections.length - 1; i >= 0; i--) {
const section = document.getElementById(sections[i]);
if (section && section.offsetTop <= scrollPosition) {
activeSection.value = sections[i];
break;
}
}
}
// 监听右侧区域的滚动事件
if (typeof window !== 'undefined') {
window.addEventListener('load', () => {
if (rightBox.value) {
rightBox.value.addEventListener('scroll', handleScroll);
}
});
roleIds.value = val.map((v) => v.id);
};
// 删除
const delDictItem = (bqId) => {
listQuery.value.bqList = listQuery.value.bqList.filter((v) => v.bqId != bqId);
tableDate.keyCount++;
};
// 组件卸载时移除事件监听
onUnmounted(() => {
if (rightBox.value) {
rightBox.value.removeEventListener('scroll', handleScroll);
}
});
}
const info=ref()
const personnelTags=ref()
// 提交
const submit = () => {
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(),
]);
elform.value.submit((data) => {
console.log("xxxxx");
console.log(infoData, personnelTagsData);
console.log(data);
data.zdrSjjz = data.zdrSjjz.join(",");
let url = title.value == "新增" ? "/mosty-gsxt/tbGsxtZdry/save" : "/mosty-gsxt/tbGsxtZdry/update";
let params = { ...data };
if (params.hjdPcsdm) {
let obj = pcsList.value.find((v) => v.dm == params.hjdPcsdm);
params.hjdPcsmc = obj ? obj.zdmc : "";
}
if (params.xzdPcsdm) {
let obj1 = pcsList.value.map((v) => v.dm == params.xzdPcsdm);
params.xzdPcsmc = obj1 ? obj1.zdmc : "";
}
loading.value = true;
qcckPost(params, url).then(() => {
loading.value = false;
proxy.$message({ type: "success", message: title.value + "成功" });
emit("updateDate");
close();
}).catch(() => {
loading.value = false;
});
});
};
const getShdep = (val) =>{
listQuery.value.shSsbmmc = val ? val.orgName : ''
}
const getSPdep = (val) =>{
listQuery.value.spSsbmmc = val ? val.orgName : ''
}
// 关闭
const close = () => {
listQuery.value = {};
dialogForm.value = false;
loading.value = false;
};
@ -368,4 +204,149 @@ defineExpose({ init });
border-color: transparent !important;
}
}
.left_box {
width: 220px;
background-color: #fafafa;
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 15px;
transition: all 0.3s ease;
}
.left_box:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-color: #409eff;
}
// 锚点列表样式
.anchor-list {
list-style: none;
padding: 0;
margin: 0;
}
.anchor-list li {
padding: 10px 15px;
margin-bottom: 5px;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 14px;
color: #606266;
position: relative;
}
.anchor-list li:hover {
background-color: #e6f7ff;
color: #409eff;
}
.anchor-list li.active {
background-color: #409eff;
color: #ffffff;
font-weight: 500;
}
.anchor-list li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #ffffff;
border-radius: 0 2px 2px 0;
}
.right_box {
width: calc(100% - 240px);
overflow-y: auto;
// padding: 15px;
background-color: #ffffff;
// 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: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 {
flex-direction: column;
}
.left_box {
width: 100%;
margin-bottom: 20px;
}
.right_box {
width: 100%;
}
.anchor-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.anchor-list li {
flex: 1 1 calc(33.333% - 10px);
margin-bottom: 5px;
text-align: center;
padding: 8px 5px;
font-size: 12px;
}
}
::v-deep .avatar-uploader {
display: flex
}
</style>

225
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/bakInfo.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="backinfo-container">
<div class="headClass" style="">
<h3>群体信息</h3>
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
</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></div>
</div>
</template>
<script setup>
import { ref, watch } from "vue";
import { Delete, Download } from '@element-plus/icons';
// import { tbGsxtZdryUpdate } from '@/api/zdr.js'
const props = defineProps({
dataList: {
type: Object,
default: () => { },
}, disabled: {
type: Boolean,
default: false
},
showBut: {
type: Boolean,
default: false
},
})
const jljl=ref([])
watch(() => props.dataList, (val) => {
if (val) {
// qtbjxx.value = val.qtBjzl
}
}, { deep: true })
const throwData = () => {
return new Promise((resolve) => {
// 基本验证：确保背景信息不为空
if (!qtbjxx.value.trim()) {
throw new Error('请输入群体背景信息');
}
resolve({
qtbjxx: qtbjxx.value,
fileList: fileList.value
});
});
}
defineExpose({
throwData
})
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.backinfo-container {
padding: 10px;
}
.background-info-input {
width: 100%;
margin-bottom: 15px;
}
.file-attachment-section {
margin-top: 15px;
}
.section-title {
font-size: 14px;
font-weight: 500;
color: #303133;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #ebeef5;
}
.file-list-container {
max-height: 100px;
overflow-y: auto;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #ffffff;
margin-bottom: 10px;
}
/* 自定义滚动条样式 */
.file-list-container::-webkit-scrollbar {
width: 6px;
}
.file-list-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.file-list-container::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.file-list-container::-webkit-scrollbar-thumb:hover {
background: #909399;
}
.empty-file-list {
padding: 20px;
text-align: center;
color: #909399;
font-size: 12px;
}
.file-list {
padding: 5px;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
margin-bottom: 2px;
background-color: #f8f9fa;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}
.file-item:hover {
background-color: #e6f7ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.file-info {
flex: 1;
display: flex;
align-items: center;
gap: 15px;
min-width: 0;
}
.file-name {
flex: 1;
font-size: 12px;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
font-size: 11px;
color: #909399;
min-width: 60px;
}
.file-time {
font-size: 11px;
color: #909399;
}
.file-actions {
display: flex;
align-items: center;
gap: 5px;
margin-left: 10px;
}
.file-actions .el-button {
padding: 0 5px;
margin: 0;
color: #606266;
transition: color 0.3s ease;
}
.file-actions .el-button:hover {
color: #409eff;
}
.delete-btn:hover {
color: #f56c6c !important;
}
.upload-btn-container {
display: flex;
justify-content: center;
margin-top: 10px;
}
.headClass {
font-size: 18px;
font-weight: 600;
color: #303133;
margin: 0 0 10px 0;
padding-bottom: 10px;
border-bottom: 2px solid #409eff;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.headClass::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background-color: #409eff;
}
h3 {
margin: 0;
}
</style>

352
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/info.vue Normal file
View File

@ -0,0 +1,352 @@
<template>
<div>
<div class="headClass">
<h3>群体背景信息</h3>
<!-- @click="gettbGsxtZdqtUpdate" -->
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="submit">保存</el-button>
</div>
<div class="form_cnt">
<FormMessage :disabled="disabled" v-model="listQuery" :formList="formData" labelWidth="100px" ref="elform"
:rules="rules">
<template #ryzp>
<div style="width: 100%; padding-left: 50px">
<MOSTY.Upload :showBtn="false" :limit="1" v-model="listQuery.ryzp" />
</div>
</template>
<template #ryLxdh>
<div class="phone-input-container">
<div class="inputGroup" v-for="(item,index) in listQuery.ryLxdh" :key="index">
<el-input v-model="listQuery.ryLxdh[index]" class="group" placeholder="请输入电话号码" />
<div class="flex align-center but">
<el-button type="primary" :icon="Plus" circle @click="addPhone" title="添加电话号码" />
<el-button type="success" :icon="Minus" circle @click="removePhone(index)" title="删除电话号码" />
</div>
</div>
</div>
</template>
<template #tags>
<div style="display: flex; align-items: center;">
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">
选择标签
</el-button>
<div v-if="roleIds.length > 0" style="margin-left: 10px; color: #606266;">
已选择 {{ roleIds.length }} 个标签
</div>
</div>
</template>
</FormMessage>
</div>
</div>
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
</template>
<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { Plus ,Minus} from "@element-plus/icons-vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import { ref, reactive, onMounted, getCurrentInstance, watch } from "vue";
import { tbGsxtZdryUpdate } from "@/api/zdr.js";
const { proxy } = getCurrentInstance();
const { D_BZ_XB, D_BZ_ZZMM, D_BZ_HYZK, D_BZ_MZ, D_BZ_XZQHDM, D_BZ_RCBKZT, D_GS_ZDR_RYJB, D_GS_ZDR_YJDJ, D_GS_BK_SSJZ, D_GS_ZDR_CZZT, D_BZ_WHCD, D_ZDRY_ZYLB } =
proxy.$dict('D_BZ_XB', 'D_BZ_ZZMM', 'D_BZ_HYZK', 'D_BZ_MZ', 'D_BZ_XZQHDM', 'D_BZ_RCBKZT', 'D_GS_ZDR_RYJB', 'D_GS_ZDR_YJDJ', 'D_GS_BK_SSJZ', 'D_GS_ZDR_CZZT', 'D_BZ_WHCD', 'D_ZDRY_ZYLB')
const props = defineProps({
dataList: {
type: Object,
default: () => { },
}, disabled: {
type: Boolean,
default: false
},
showBut: {
type: Boolean,
default: false
},
})
const rules = reactive({
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
...rule.identityCardRule({ validator: true }, 'rySfzh'), //身份证校验
...rule.phoneRule({ validator: true }, "ryLxdh"), // 是否必填 是否进行校验,
rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
ryLxdh: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
zyBm: [{ required: true, message: "请选择职业", trigger: "change" }],
ryMz: [{ required: true, message: "请选择民族", trigger: "change" }],
ryCsrq: [{ required: true, message: "请选择出生日期", trigger: "change" }],
ryJg: [{ required: true, message: "请选择籍贯", trigger: "change" }],
zdrRyjb: [{ required: true, message: "请选择人员级别", trigger: "change" }],
zdrYjdj: [{ required: true, message: "请选择预警等级", trigger: "change" }]
});
const listQuery = ref({ryLxdh:[""]}); //表单
const chooseMarksVisible = ref(false); // 控制标签选择弹窗显示
const roleIds = ref([]); // 已选择的标签ID
const formData = ref([
{ label: "人员照片", prop: "ryzp", type: "slot", width: "100%" },
{ label: "姓名", prop: "ryXm", type: "input" },
{ label: "性别", prop: "ryXb", type: "select", options: D_BZ_XB },
{ label: "身份证号", prop: "rySfzh", type: "input" },
{ label: "籍贯", prop: "ryJg", type: "select", options: D_BZ_XZQHDM },
{ label: "曾用名", prop: "cym", type: "input" },
{ label: "文化程度", prop: "whcdBm", type: "select", options: D_BZ_WHCD },
{ label: "民族", prop: "ryMz", type: "select", options: D_BZ_MZ },
{ label: "政治面貌", prop: "zzmm", type: "select", options: D_BZ_ZZMM },
{ label: "职业", prop: "zyBm", type: "select", options: D_ZDRY_ZYLB },
{ label: "人员级别", prop: "zdrRyjb", type: "select", options: D_GS_ZDR_RYJB },
{ label: "预警等级", prop: "zdrYjdj", type: "select", options: D_GS_ZDR_YJDJ },
{ label: "出生日期", prop: "ryCsrq", type: "date" },
{ label: "户籍地区划", prop: "hjdQh", type: "select", options: D_BZ_XZQHDM },
{ label: "户籍地详址", prop: "hjdXz", type: "input" },
{ label: "户籍地派出所", prop: "hjdPcsdm", type: "department" },
{ label: "现住地区划", prop: "xzdQh", type: "select", options: D_BZ_XZQHDM },
{ label: "现住地详址", prop: "xzdXz", type: "input" },
{ label: "现住地派出所", prop: "xzdPcsdm", type: "department" },
{ label: "管辖单位", prop: "gxSsbmdm", depMc: 'gxSsbmmc', type: "department" },
{ label: "诉求单位", prop: "sqSsbmdm", depMc: 'sqSsbmmc', type: "department" },
{ label: "责任单位", prop: "zrSsbmdm", depMc: 'zrSsbmmc', type: "department" },
{ label: "所属警种", prop: "zdrSsjz", type: "select", options: D_GS_BK_SSJZ },
{ label: "涉及警种", prop: "zdrSjjz", type: "select", options: D_GS_BK_SSJZ, multiple: true },
{ label: "婚姻状态", prop: "hyzk", type: "select", options: D_BZ_HYZK },
{ label: "处置状态", prop: "zdrCzzt", type: "select", options: D_GS_ZDR_CZZT },
{ label: "布控状态", prop: "zdrBkZt", type: "select", options: D_BZ_RCBKZT },
{ label: "入库开始时间", prop: "zdrRkkssj", type: "datetime" },
{ label: "入库结束时间", prop: "zdrRkjssj", type: "datetime" },
{ label: "Mac地址", prop: "macDz", type: "input" },
{ label: "联系电话", prop: "ryLxdh", type: "slot", width: "100%" },
{ label: "标签选择", prop: "tags", type: "slot", width: "100%" },
{ label: "管控原因", prop: "zdrLkyy", type: "textarea", width: "100%" },
]);
const loading = ref(false);
const elform = ref();
const disabled = ref(false);
// phoneList已重构为listQuery.value.ryLxdh
// 创建一个工具函数进行深拷贝
const deepClone = (obj) => {
if (obj === null || typeof obj !== 'object') {
return obj;
}
if (obj instanceof Date) {
return new Date(obj.getTime());
}
if (obj instanceof Array) {
return obj.map(item => deepClone(item));
}
const clonedObj = {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
clonedObj[key] = deepClone(obj[key]);
}
}
return clonedObj;
};
// 监听props.dataList变化，处理初始化数据
watch(() => props.dataList, (val) => {
if (val) {
// 使用深拷贝避免直接引用同一个对象
listQuery.value = deepClone(val);
// 处理照片数据
listQuery.value.ryzp = val.ryzp == null || val.ryzp == '' ? [] : [val.ryzp];
// 处理标签ID数据，确保数据回显
if (val.tagIds && Array.isArray(val.tagIds) && val.tagIds.length > 0) {
roleIds.value = [...val.tagIds];
} else if (val.bqIds && Array.isArray(val.bqIds) && val.bqIds.length > 0) {
roleIds.value = [...val.bqIds];
} else {
roleIds.value = [];
}
// listQuery.value.ryLxdh =listQuery.value.ryLxdh.length>0?listQuery.value.ryLxdh:['11'];
}
}, { deep: true })
// 提交
const submit = () => {
loading.value = true
gettbGsxtZdryUpdate()
};
// 处理标签选择结果
const choosed = (selectedTags) => {
// 存储选择的标签ID用于回显
roleIds.value = selectedTags.map(tag => tag.id);
// 这里可以根据实际需求处理选择的标签数据
};
//
const gettbGsxtZdryUpdate = () => {
const promes = {
...listQuery.value,
ryzp: listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : "",
ryLxdh: listQuery.value.ryLxdh,
tagIds: roleIds.value,
bqIds: roleIds.value,
}
tbGsxtZdryUpdate(promes).then((res) => {
listQuery.value.ryzp = []
proxy.$message({
message: '更新成功',
type: 'success',
})
}).catch((err) => {
}).finally(() => {
loading.value = false
});
}
// 添加电话号码
const addPhone = () => {
// 确保新添加的电话号码与现有数据结构一致
// 创建深拷贝以避免响应式更新问题
const newPhoneList = [...listQuery.value.ryLxdh];
newPhoneList.push('');
// 用全新数组替换现有数组，确保Vue正确检测到变化
listQuery.value.ryLxdh = newPhoneList;
}
// 删除电话号码
const removePhone = (index) => {
if (listQuery.value.ryLxdh .length > 1) {
listQuery.value.ryLxdh .splice(index, 1);
} else {
// 清空输入但保留输入框
listQuery.value.ryLxdh[0] = '';
proxy.$message.warning('至少保留一个联系电话');
}
}
const throwData = () => {
return new Promise((resolve, reject) => {
if (elform.value && elform.value.validate) {
elform.value.validate((valid) => {
if (valid) {
// 过滤掉空的电话号码
const validPhones = listQuery.value.ryLxdh.filter(phone => phone && phone.trim());
if (validPhones.length === 0) {
reject(new Error('请至少输入一个有效的联系电话'));
return;
}
resolve({
...listQuery.value,
ryzp: listQuery.value.ryzp && listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : '',
ryLxdh: JSON.stringify(validPhones),
tagIds: roleIds.value,
bqIds: roleIds.value
});
} else {
reject(new Error('表单验证失败，请检查输入信息'));
}
});
} else {
// 如果没有验证方法，直接返回数据
const validPhones = listQuery.value.ryLxdh.filter(phone => phone && phone.trim());
if (validPhones.length === 0) {
reject(new Error('请至少输入一个有效的联系电话'));
return;
}
resolve({
...listQuery.value,
ryzp: listQuery.value.ryzp && listQuery.value.ryzp.length > 0 ? listQuery.value.ryzp.toString() : '',
ryLxdh: JSON.stringify(validPhones),
tagIds: roleIds.value,
bqIds: roleIds.value
});
}
});
};
defineExpose({
throwData,
});
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.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;
width: 100%;
padding: 0 !important;
}
::v-deep .form-item-box {
width: 100% !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;
display: flex;
justify-content: space-between;
align-items: center;
}
.headClass::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background-color: #409eff;
}
h3 {
margin: 0;
}
.phone-input-container {
display: flex;
// flex-direction: column;
flex-wrap: wrap;
width: 100%;
padding: 0;
}
.inputGroup{
margin-left: 10px;
width: 100%;
max-width: 400px;
display: flex;
align-items: center;
margin-bottom: 10px;
.group{
width: 250px;
margin-right: 10px;
}
.but{
display: flex;
gap: 5px;
}
}
::v-deep .el-button--primary {
background-color: #409eff !important;
border-color: #409eff !important;
}
::v-deep .el-button--success {
background-color: #67c23a !important;
border-color: #67c23a !important;
}
</style>

210
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/personnelTags.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<div>
<div class="headClass" style="">
<h3>人员标签</h3>
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">选择</el-button>
</div>
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<template #bqLx="{ row }">
<DictTag :tag="false" :value="row.bqLx" :options="D_GS_BQ_DJ" />
</template>
<template #bqLb="{ row }">
<DictTag :tag="false" :value="row.bqLb" :options="D_GS_SSYJ" />
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link type="danger" @click="delDictItem(row.bqId)">删除</el-link>
</template>
</MyTable>
</div>
<ChooseMarks v-model="chooseMarksVisible" @choosed="addMarks" :roleIds="roleIds" />
</template>
<script setup>
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
import { tbGsxtZdryUpdate } from '@/api/zdr.js'
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_GS_BQ_DJ, D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ"); //获取字典数据
const chooseMarksVisible = ref(false)
const props = defineProps({
dataList: {
type: Object,
default: () => { },
}, disabled: {
type: Boolean,
default: false
},
showBut: {
type: Boolean,
default: false
},
})
const listData = ref({})
watch(() => props.dataList, (val) => {
if (val) {
listData.value = val
pageData.tableData = val.bqList
roleIds.value = val.bqList.map(v => v.bqId)
console.log(roleIds.value);
}
}, { deep: true })
const roleIds = ref([])
// 表格数据
const pageData = reactive({
tableData: [],
tableColumn: [{
prop: 'bqMc',
label: '标签名称',
showOverflowTooltip: true
}, {
prop: 'bqDm',
label: '标签代码',
}, {
showSolt: true,
prop: 'bqLx',
label: '标签类型',
}, {
showSolt: true,
prop: 'bqLb',
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 zdqtUpdate = (val) => {
const params = {
id: listData.value.id,
bqList: pageData.tableData
}
tbGsxtZdryUpdate(params).then(res => {
proxy.$message({
message: val,
type: 'success'
})
})
}
// 新增标签
const addMarks = (val) => {
pageData.tableData = 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)
if (!props.disabled && props.showBut) {
zdqtUpdate("标签添加成功")
}
}
// 删除标签
const delDictItem = (val) => {
if (!props.disabled && props.showBut) {
ElMessageBox.confirm(
'是否删除标签',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
roleIds.value = roleIds.value.filter(v => v != val)
zdqtUpdate("标签删除成功")
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消删除',
})
})
} else {
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
roleIds.value = roleIds.value.filter(v => v != val)
}
}
// 抛出数据并验证标签列表不为空
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;
display: flex;
justify-content: space-between;
align-items: center;
}
.headClass::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background-color: #409eff;
}
h3 {
margin: 0;
}
</style>

247
src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/vehicle.vue Normal file
View File

@ -0,0 +1,247 @@
<template>
<div>
<div class="headClass" style="">
<h3>关联车辆</h3>
<el-button type="primary" :disabled="disabled" @click="AddPore">选择</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 { 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: '车辆品牌',
prop: 'clsbm',
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 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)
}
}
// 删除车辆
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;
}
.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;
display: flex;
justify-content: space-between;
align-items: center;
}
.headClass::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 60px;
height: 2px;
background-color: #409eff;
}
h3 {
margin: 0;
}
</style>

4
vue.config.js
View File

@ -4,8 +4,8 @@ function resolve(dir) {
return path.join(__dirname, dir);
}
// const serverHost = "http://192.168.1.32:8006"//波哥
const serverHost = "http://192.168.0.231:8006"//线上
const serverHost = "http://192.168.1.32:8006"//波哥
// const serverHost = "http://192.168.0.231:8006"//线上
// const serverHost = "http://192.168.1.117:8006"//周
// const serverHost = "http://192.168.1.98:8006"//毛毛