更新页面
This commit is contained in:
208
src/components/ChooseList/ChooseQt/index.vue
Normal file
208
src/components/ChooseList/ChooseQt/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
|
||||
<template #title>
|
||||
<span class="mr10 f16">选择布控群体</span>
|
||||
</template>
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="群体名称">
|
||||
<el-input placeholder="请输入群体名称" v-model="listQuery.qtMc" clearable ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" :key="keyTabel" @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div class="pl20 pr10 pt10 pb10">
|
||||
<el-table :data="props.row.zdryList" >
|
||||
<el-table-column label="姓名" prop="ryXm" align="center" />
|
||||
<el-table-column prop="rySfzh" align="center" label="身份证"/>
|
||||
<el-table-column prop="ryXb" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ryMz" align="center" label="民族">
|
||||
<template #default="{ row }">
|
||||
<DictTag :value="row.ryMz" :tag="false" :options="D_BZ_MZ" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ryLxdh" align="center" label="手机号"/>
|
||||
<el-table-column prop="xzdXz" align="center" label="现居住址"/>
|
||||
<el-table-column prop="bqList" align="center" label="人员标签">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.bqList">
|
||||
<span v-for="(it,idx) in row.bqList" :key="idx"> {{ it.bqMc }}、</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qtMc" align="center" label="群体名称"/>
|
||||
<el-table-column prop="qtFxdj" align="center" label="风险等级">
|
||||
<template #default="{ row }">
|
||||
<DictTag :value="row.qtFxdj" :tag="false" :options="D_GS_ZDQT_FXDJ" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye flex just-end " :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@pageCurrent-change="handleCurrentChange"
|
||||
:pageCurrent-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-center">
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
<el-button @click="closed">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet} from "@/api/qcckApi.js";
|
||||
import { defineProps, ref ,getCurrentInstance, watch} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB,D_GS_ZDQT_FXDJ,D_BZ_MZ } = proxy.$dict("D_BZ_XB","D_GS_ZDQT_FXDJ","D_BZ_MZ"); //获取字典数据
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosed"]);
|
||||
const keyTabel = ref(0)
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, };
|
||||
getListData();
|
||||
};
|
||||
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value;
|
||||
let list = [];
|
||||
let listId = [];
|
||||
userList.forEach((val) => {
|
||||
if (listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
});
|
||||
emits("choosed", list);
|
||||
closed();
|
||||
};
|
||||
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = () => {
|
||||
keyTabel.value++
|
||||
const params = {...listQuery.vlue}
|
||||
qcckGet(params,'/mosty-gsxt/tbGsxtZdqt/selectPage').then(res=>{
|
||||
tableData.value = res.records || [];
|
||||
total.value = res.total;
|
||||
multipleUser();
|
||||
})
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
multipleUserRef.value.toggleRowSelection(item, false);
|
||||
if (props.roleIds.some((id) => id == item.id)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
if (props.Single) {
|
||||
if (val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
} else {
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
watch(()=>props.modelValue,val=>{
|
||||
if(val) handleFilter();
|
||||
},{immediate:true})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
100
src/components/ChooseList/ChooseZdr/addPeo.vue
Normal file
100
src/components/ChooseList/ChooseZdr/addPeo.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-dialog v-model="showDialog" :destroy-on-close="true" title="新增人员" @close="close" :close-on-click-modal="false">
|
||||
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
|
||||
<template #bqList>
|
||||
<div class="marks pointer" @click="chooseMarksVisible = true">
|
||||
<span style="color: rgb(175 178 184);padding-left: 10px;" v-if="!listQuery.bqList || listQuery.bqList.length == 0 ">请选择标签</span>
|
||||
<span v-else >
|
||||
<el-tag @close.stop="closeTag(idx)" type="success" closable v-for="(it,idx) in listQuery.bqList" :key="idx">{{ it.bqMc }}</el-tag >
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
<template #footer>
|
||||
<div class="flex just-center">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<ChooseMarks v-model="chooseMarksVisible" @choosed="choosed" :roleIds="roleIds" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { reactive, ref,getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB } = proxy.$dict("D_BZ_XB"); // 获取字典数据
|
||||
const elform = ref()
|
||||
const roleIds = ref([])
|
||||
const showDialog = ref(false)
|
||||
const chooseMarksVisible = ref(false)
|
||||
const emit = defineEmits(['change'])
|
||||
const listQuery = ref({})
|
||||
const formData = ref([
|
||||
{ label: "人员姓名", prop: "ryXm", type: "input" ,width:'45%'},
|
||||
{ label: "性别", prop: "ryXb", type: "select" ,width:'45%',options:D_BZ_XB},
|
||||
{ label: "身份证号", prop: "rySfzh", type: "input" ,width:'45%'},
|
||||
{ label: "手机号码", prop: "ryLxdh", type: "input",width:'45%' },
|
||||
{ label: "户籍地址", prop: "hjdXz", type: "input",width:'100%'},
|
||||
{ label: "现居住地址", prop: "xzdXz", type: "input",width:'100%'},
|
||||
{ label: "特征描述", prop: "qtTzms", type: "input" ,width:'100%'},
|
||||
{ label: "人员标签", prop: "bqList", type: "slot" ,width:'100%'},
|
||||
{ label: "车牌号", prop: "clCph", type: "input" ,width:'45%'},
|
||||
{ label: "车架号", prop: "clCjh", type: "input" ,width:'45%'},
|
||||
{ label: "人员照片", prop: "fjZp", type: "upload" ,width:'100%'},
|
||||
])
|
||||
const rules = reactive({
|
||||
ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
rySfzh: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
|
||||
ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
|
||||
ryLxdh: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
|
||||
hjdXz: [{ required: true, message: "请输入户籍地", trigger: "blur" }],
|
||||
xzdXz: [{ required: true, message: "请输入现居住地址", trigger: "blur" }],
|
||||
})
|
||||
const init = () =>{
|
||||
showDialog.value = true;
|
||||
}
|
||||
|
||||
// 选择标签
|
||||
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 closeTag = (idx) =>{
|
||||
listQuery.value.bqList.splice(idx,1)
|
||||
roleIds.value.splice(idx,1)
|
||||
}
|
||||
|
||||
const submitForm = () =>{
|
||||
elform.value.submit((val)=>{
|
||||
val.id = new Date().getTime()
|
||||
emit('change',val)
|
||||
showDialog.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const close = () =>{
|
||||
elform.value.reset();
|
||||
listQuery.value.bqList = []
|
||||
roleIds.value = []
|
||||
showDialog.value = false;
|
||||
}
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.marks{
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
219
src/components/ChooseList/ChooseZdr/index.vue
Normal file
219
src/components/ChooseList/ChooseZdr/index.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<el-dialog width="1400px" :model-value="modelValue" append-to-body @close="closed">
|
||||
<template #title>
|
||||
<span class="mr10 f16">选择布控人员</span>
|
||||
<el-button type="primary" size="small" @click="zdyaddPerson">添加其他人员</el-button>
|
||||
</template>
|
||||
<el-form :model="listQuery" :inline="true">
|
||||
<el-form-item label="人员姓名">
|
||||
<el-input placeholder="请输入人员姓名" v-model="listQuery.ryxm" clearable ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input placeholder="请输入身份证号" v-model="listQuery.sfzh" clearable ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码">
|
||||
<el-input placeholder="请输入手机号码" v-model="listQuery.sjhm" clearable ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
|
||||
<el-table ref="multipleUserRef" :key="keyTabel" @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" style="width: 100%" height="450">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column prop="ryXm" align="center" label="姓名"/>
|
||||
<el-table-column prop="rySfzh" align="center" label="身份证"/>
|
||||
<el-table-column prop="ryXb" align="center" label="性别">
|
||||
<template #default="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ryMz" align="center" label="民族">
|
||||
<template #default="{ row }">
|
||||
<DictTag :value="row.ryMz" :tag="false" :options="D_BZ_MZ" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hjdXz" align="center" label="户籍地"/>
|
||||
<el-table-column prop="xzdXz" align="center" label="现居住址"/>
|
||||
<el-table-column prop="ryLxdh" align="center" label="手机号"/>
|
||||
<el-table-column prop="qtXnsf" align="center" label="虚拟身份"/>
|
||||
<el-table-column prop="clCph" align="center" label="车牌号"/>
|
||||
<el-table-column prop="clCjh" align="center" label="车架号"/>
|
||||
<el-table-column prop="qtTzms" align="center" label="特征描述"/>
|
||||
<el-table-column prop="bqList" align="center" label="人员标签">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.bqList">
|
||||
<span v-for="(it,idx) in row.bqList" :key="idx"> {{ it.bqMc }}、</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye flex just-end " :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@pageCurrent-change="handleCurrentChange"
|
||||
:pageCurrent-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex just-center">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 自定义选添加人 -->
|
||||
<AddPeo ref="addPerson" @change="changeZdy"></AddPeo>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AddPeo from './addPeo.vue'
|
||||
import { qcckGet} from "@/api/qcckApi.js";
|
||||
import { defineProps, ref ,getCurrentInstance, watch} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_XB,D_BZ_MZ } = proxy.$dict("D_BZ_XB","D_BZ_MZ"); //获取字典数据
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default:false
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
const addPerson = ref()
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "choosed","choosedAdd"]);
|
||||
const keyTabel = ref(0)
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20, };
|
||||
getListData();
|
||||
};
|
||||
|
||||
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value;
|
||||
let list = [];
|
||||
let listId = [];
|
||||
userList.forEach((val) => {
|
||||
if (listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
});
|
||||
emits("choosed", list);
|
||||
closed();
|
||||
};
|
||||
|
||||
// 自定义加人
|
||||
const changeZdy = (val) => {
|
||||
emits("choosedAdd", val);
|
||||
closed();
|
||||
}
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = () => {
|
||||
keyTabel.value++
|
||||
const params = {...listQuery.vlue}
|
||||
qcckGet(params,'/mosty-gsxt/tbGsxtZdry/selectPage').then(res=>{
|
||||
tableData.value = res.records || [];
|
||||
total.value = res.total;
|
||||
multipleUser();
|
||||
})
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
multipleUserRef.value.toggleRowSelection(item, false);
|
||||
if (props.roleIds.some((id) => id == item.id)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (val) => {
|
||||
if (props.Single) {
|
||||
if (val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
} else {
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
|
||||
const zdyaddPerson = () => {
|
||||
addPerson.value.init();
|
||||
};
|
||||
|
||||
watch(()=>props.modelValue,val=>{
|
||||
if(val) handleFilter();
|
||||
},{immediate:true})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
Reference in New Issue
Block a user