对接’我的布控的增删查改‘，布控审核送审
This commit is contained in:
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="titleValue"
|
||||
width="900px"
|
||||
:model-value="modelValue"
|
||||
append-to-body
|
||||
@close="closed"
|
||||
>
|
||||
<div>
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="集合名称">
|
||||
<el-input
|
||||
placeholder="请输入集合名称"
|
||||
v-model="listQuery.jhMc"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||||
<el-button type="info" @click="reset()"> 重置 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
class="tabBox"
|
||||
:class="props.Single ? 'tabBoxRadio' : ''"
|
||||
style="margin-top: 0px"
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleUserRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="tableData"
|
||||
border
|
||||
:row-key="keyid"
|
||||
style="width: 100%"
|
||||
height="450"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
:reserve-selection="true"
|
||||
/>
|
||||
<el-table-column prop="jhMc" align="center" label="集合名称" />
|
||||
<el-table-column prop="jhSm" align="center" label="集合说明" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted } from "vue";
|
||||
import { qcckGet } from "@/api/qcckApi.js";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
dic: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
|
||||
|
||||
titleValue: {
|
||||
type: String,
|
||||
default: "选择大类"
|
||||
},
|
||||
LeaderType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//是否单选
|
||||
Single: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
roleIds: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
current: 1,
|
||||
size: 20
|
||||
});
|
||||
const loading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const emits = defineEmits(["update:modelValue", "chooseDate"]);
|
||||
onMounted(() => {
|
||||
handleFilter();
|
||||
});
|
||||
const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = { current: 1, size: 20 };
|
||||
getListData();
|
||||
};
|
||||
|
||||
const keyid = (row) => {
|
||||
return row.id;
|
||||
};
|
||||
// 为用户分配角色
|
||||
const onComfirm = () => {
|
||||
const userList = multipleSelectionUser.value;
|
||||
let list = [];
|
||||
let listId = [];
|
||||
userList.forEach((val) => {
|
||||
if (listId.indexOf(val.id) == -1) {
|
||||
list.push(val);
|
||||
listId.push(val.id);
|
||||
}
|
||||
});
|
||||
emits("chooseDate", list);
|
||||
let data = { type: props.LeaderType, userList: userList };
|
||||
emits("chooseDateLeader", data);
|
||||
closed();
|
||||
};
|
||||
/**
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
getListData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.current = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = () => {
|
||||
const data = listQuery.value;
|
||||
loading.value = true;
|
||||
qcckGet(data, "/mosty-gsxt/tbGsxtBqgl/selectPage")
|
||||
.then((res) => {
|
||||
tableData.value = res?.records;
|
||||
total.value = Number(res.total);
|
||||
loading.value = false;
|
||||
multipleUser();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
//列表回显
|
||||
function multipleUser() {
|
||||
tableData.value.forEach((item) => {
|
||||
if (props.roleIds.some((id) => id == item.id)) {
|
||||
multipleUserRef.value.toggleRowSelection(item, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.current = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
const multipleUserRef = ref(null);
|
||||
const multipleSelectionUser = ref([]);
|
||||
const handleSelectionChange = (val) => {
|
||||
if (props.Single) {
|
||||
if (val.length > 1) {
|
||||
let del_row = val.shift();
|
||||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
multipleSelectionUser.value = val;
|
||||
} else {
|
||||
multipleSelectionUser.value = val;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
</style>
|
||||
<style>
|
||||
.tabBoxRadio .el-checkbox__inner {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">设备来源范围{{ title }} </span>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form_cnt">
|
||||
<FormMessage
|
||||
v-model="listQuery"
|
||||
:formList="formData"
|
||||
ref="elform"
|
||||
:rules="rules"
|
||||
>
|
||||
<!-- 身份标签细类 -->
|
||||
<template #sxtList>
|
||||
<el-button @click="openDialog('01')">选择</el-button>
|
||||
<div class="boxlist">
|
||||
<MyTable
|
||||
:tableData="tableDate.sxtList"
|
||||
:tableColumn="tableDate.tableColumn"
|
||||
:tableHeight="tableDate.tableHeight"
|
||||
:key="tableDate.keyCount"
|
||||
:tableConfiger="tableDate.tableConfiger"
|
||||
:controlsWidth="tableDate.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="delDictItem(row.id, '身份标签细类')"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
<!-- 列表弹窗 -->
|
||||
<DialogList
|
||||
:Single="false"
|
||||
:roleIds="roleIds"
|
||||
v-if="chooseShow"
|
||||
:dic="props.dic"
|
||||
@chooseDate="chooseDate"
|
||||
:titleValue="chooseTitle"
|
||||
v-model="chooseShow"
|
||||
:bqLx="chooseType"
|
||||
bqDl="02"
|
||||
></DialogList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import DialogList from "@/views/backOfficeSystem/BasicManagement/components/dialogList.vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
|
||||
import {
|
||||
ref,
|
||||
defineExpose,
|
||||
defineProps,
|
||||
reactive,
|
||||
defineEmits,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dic: Object
|
||||
});
|
||||
const roleIds = ref([]); //角色id
|
||||
const chooseType = ref("01"); //选择弹窗类型
|
||||
const chooseShow = ref(false); //选择弹窗
|
||||
const chooseTitle = ref(""); //选择弹窗
|
||||
const dialogForm = ref(false); //弹窗
|
||||
const formData = reactive([
|
||||
{ label: "集合名称", prop: "jhMc", type: "input" },
|
||||
{ label: "集合说明", prop: "jhSm", type: "input" },
|
||||
|
||||
{ label: "摄像头列表", prop: "sxtList", type: "slot", width: "100%" }
|
||||
]);
|
||||
const rules = reactive({
|
||||
jhMc: [{ required: true, message: "请输入集合名称", trigger: "blur" }],
|
||||
jhSm: [{ required: true, message: "请输入集合说明", trigger: "blur" }]
|
||||
});
|
||||
|
||||
const tableDate = reactive({
|
||||
sxtList: [
|
||||
{
|
||||
csmc: "产商名称",
|
||||
csmc: "厂商名称",
|
||||
ipdz: "IP地址",
|
||||
ipv6dz: "IPV6地址",
|
||||
jd: "集合名称",
|
||||
jkdbgbh: "监控点国标编号",
|
||||
sbbh: "设备编号",
|
||||
sbmc: "设备名称",
|
||||
sjly: "数据来源",
|
||||
sjlyid: " 数据来源ID",
|
||||
sxtId: "摄像头ID",
|
||||
wd: "地球纬度"
|
||||
}
|
||||
], //表格数据
|
||||
xwbqIdList: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
tableHeight: 225,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 90, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "产商名称", prop: "csmc", showOverflowTooltip: true },
|
||||
{ label: "厂商名称", prop: "csmc" },
|
||||
{ label: "IP地址", prop: "ipdz" },
|
||||
{ label: "IPV6地址", prop: "ipv6dz" },
|
||||
{ label: "集合名称", prop: "jd" },
|
||||
{ label: "监控点国标编号", prop: "jkdbgbh" },
|
||||
{ label: "设备编号", prop: "sbbh" },
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "数据来源(1 海康 2 旷视)", prop: "sjly" },
|
||||
{ label: "数据来源ID", prop: "sjlyid" },
|
||||
{ label: "摄像头ID", prop: "sxtId" },
|
||||
{ label: "地球纬度", prop: "wd" }
|
||||
]
|
||||
});
|
||||
const listQuery = ref({}); //表单
|
||||
const loading = ref(false);
|
||||
const elform = ref();
|
||||
const title = ref("");
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == "add" ? "新增" : "编辑";
|
||||
if (row) getDataById(row.id);
|
||||
};
|
||||
// 根据id查询详情
|
||||
const getDataById = (id) => {
|
||||
qcckGet({}, "/mosty-gsxt/tbGsxtGzyJh/selectVoById/" + id).then((res) => {
|
||||
listQuery.value = res;
|
||||
tableDate.sxtList = res.sxtList;
|
||||
listQuery.value.sxtList = res.sxtList.map((item) => item.id);
|
||||
tableDate.keyCount++;
|
||||
});
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
elform.value.submit((data) => {
|
||||
let url =
|
||||
title.value == "新增"
|
||||
? "/mosty-gsxt/tbGsxtGzyJh/save"
|
||||
: "/mosty-gsxt/tbGsxtGzyJh/update";
|
||||
let params = { ...data };
|
||||
params.sxtList = [
|
||||
{
|
||||
csmc: "产商名称",
|
||||
csmc: "厂商名称",
|
||||
ipdz: "IP地址",
|
||||
ipv6dz: "IPV6地址",
|
||||
jd: 29.6510453, //经度
|
||||
jkdbgbh: "监控点国标编号",
|
||||
sbbh: "设备编号",
|
||||
sbmc: "设备名称",
|
||||
sjly: "数据来源",
|
||||
sjlyid: " 数据来源ID",
|
||||
sxtId: "摄像头ID",
|
||||
wd: 94.3602321 //维度
|
||||
}
|
||||
];
|
||||
loading.value = true;
|
||||
qcckPost(params, url)
|
||||
.then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value + "成功" });
|
||||
emit("updateDate");
|
||||
loading.value = false;
|
||||
close();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (type) => {
|
||||
chooseShow.value = true;
|
||||
chooseType.value = type;
|
||||
chooseTitle.value = "选择摄像头列表";
|
||||
roleIds.value = tableDate.sxtList.map((item) => item.id);
|
||||
};
|
||||
// 选择数据
|
||||
const chooseDate = (data) => {
|
||||
if (chooseType.value == "01") {
|
||||
tableDate.sxtList = data;
|
||||
listQuery.value.sxtList = tableDate.sxtList.map((item) => item.id);
|
||||
} else {
|
||||
tableDate.xwbqIdList = data;
|
||||
listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id, type) => {
|
||||
tableDate.sxtList = tableDate.sxtList.filter((item) => item.id !== id);
|
||||
listQuery.value.sxtList = tableDate.sxtList.map((item) => item.id);
|
||||
};
|
||||
// 关闭
|
||||
const close = () => {
|
||||
listQuery.value = {};
|
||||
tableDate.sxtList = [];
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
};
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
.boxlist {
|
||||
width: 99%;
|
||||
height: 225px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="布控监视管理">
|
||||
<!-- <el-button>
|
||||
<span style="vertical-align: middle">调级</span>
|
||||
</el-button>
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导入</span>
|
||||
</el-button> -->
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm
|
||||
v-if="show"
|
||||
ref="detailDiloag"
|
||||
:dic="{ D_GS_BQ_LX, D_GS_BQ_DJ, D_GS_SSYJ, D_GS_BQ_LB }"
|
||||
@updateDate="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_BQ_DJ, D_GS_SSYJ, D_GS_BQ_LB, D_GS_BQ_LX } = proxy.$dict(
|
||||
"D_GS_BQ_DJ",
|
||||
"D_GS_SSYJ",
|
||||
"D_GS_BQ_LB",
|
||||
"D_GS_BQ_LX"
|
||||
); //获取字典数据
|
||||
const detailDiloag = ref();
|
||||
const show = ref(false);
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "集合名称",
|
||||
prop: "jhMc",
|
||||
placeholder: "请输入集合名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "集合说明",
|
||||
prop: "jhSm",
|
||||
placeholder: "请输入集合说明",
|
||||
showType: "input"
|
||||
},
|
||||
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{
|
||||
label: "集合名称",
|
||||
prop: "jhMc"
|
||||
},
|
||||
{
|
||||
label: "集合说明",
|
||||
prop: "jhSm"
|
||||
},
|
||||
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
qcckGet(queryFrom.value, "/mosty-gsxt/tbGsxtGzyJh/selectPage")
|
||||
.then((res) => {
|
||||
pageData.tableData = res.records;
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) => {
|
||||
proxy
|
||||
.$confirm("确定要删除", "警告", { type: "warning" })
|
||||
.then(() => {
|
||||
qcckDelete({}, "/mosty-gsxt/tbGsxtBqzh/" + id).then(() => {
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
detailDiloag.value.init(type, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user