335 lines
8.3 KiB
Vue
335 lines
8.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-dialog
|
||
|
|
:title="titleValue"
|
||
|
|
width="1400px"
|
||
|
|
v-model="modelValue"
|
||
|
|
@close="closed"
|
||
|
|
>
|
||
|
|
<div v-if="modelValue">
|
||
|
|
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||
|
|
<el-form-item label="所属部门">
|
||
|
|
<MOSTY.Department
|
||
|
|
width="100%"
|
||
|
|
clearable
|
||
|
|
v-model="listQuery.ssbmdm"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="感知源名称">
|
||
|
|
<el-input
|
||
|
|
v-model="listQuery.sbmc"
|
||
|
|
placeholder="请输入感知源名称"
|
||
|
|
clearable
|
||
|
|
/>
|
||
|
|
</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" style="margin-top: 0px" v-if="modelValue">
|
||
|
|
<el-table
|
||
|
|
ref="multipleUserRef"
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
:data="tableData"
|
||
|
|
:highlight-current-row="props.Single"
|
||
|
|
border
|
||
|
|
v-loading="loading"
|
||
|
|
style="width: 100%"
|
||
|
|
:row-key="keyid"
|
||
|
|
height="450"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
type="selection"
|
||
|
|
width="55"
|
||
|
|
:reserve-selection="true"
|
||
|
|
v-if="!props.Single"
|
||
|
|
/>
|
||
|
|
<el-table-column width="55" #default="{ row }" v-else>
|
||
|
|
<el-radio v-model="ridioIndex" :label="row.id"></el-radio>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
label="序号"
|
||
|
|
type="index"
|
||
|
|
align="center"
|
||
|
|
sortable
|
||
|
|
width="80"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
sortable
|
||
|
|
prop="ssbm"
|
||
|
|
label="所属部门"
|
||
|
|
show-overflow-tooltip
|
||
|
|
align="center"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
sortable
|
||
|
|
prop="sbmc"
|
||
|
|
show-overflow-tooltip
|
||
|
|
align="center"
|
||
|
|
label="感知源名称"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
show-overflow-tooltip
|
||
|
|
align="center"
|
||
|
|
label="厂商名称"
|
||
|
|
prop="csmc"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<el-table-column
|
||
|
|
prop="sbbh"
|
||
|
|
show-overflow-tooltip
|
||
|
|
align="center"
|
||
|
|
label="设备编号"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
sortable
|
||
|
|
prop="jd"
|
||
|
|
show-overflow-tooltip
|
||
|
|
label="经度"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
sortable
|
||
|
|
prop="wd"
|
||
|
|
show-overflow-tooltip
|
||
|
|
label="纬度"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div class="fenye">
|
||
|
|
<el-pagination
|
||
|
|
class="pagination"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
:current-page="listQuery.pageCurrent"
|
||
|
|
:page-sizes="[2, 5, 10, 20]"
|
||
|
|
:page-size="listQuery.pageSize"
|
||
|
|
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>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import * as rule from "@/utils/rules.js";
|
||
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
||
|
|
import { ElMessage } from "element-plus";
|
||
|
|
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||
|
|
import {ysSxtgetPageList} from '@/api/yszx.js'
|
||
|
|
import {
|
||
|
|
defineProps,
|
||
|
|
watch,
|
||
|
|
ref,
|
||
|
|
onMounted,
|
||
|
|
nextTick,
|
||
|
|
getCurrentInstance
|
||
|
|
} from "vue";
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
const { D_BZ_JCZLX } = proxy.$dict("D_BZ_JCZLX");
|
||
|
|
const props = defineProps({
|
||
|
|
//是否显示
|
||
|
|
modelValue: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
//标题
|
||
|
|
titleValue: {
|
||
|
|
type: String,
|
||
|
|
default: "选择环林卡口"
|
||
|
|
},
|
||
|
|
//是否单选
|
||
|
|
Single: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
//已经选中得数据回显
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const keyid = (row) => {
|
||
|
|
return row.id;
|
||
|
|
};
|
||
|
|
const ridioIndex = ref(null);
|
||
|
|
const total = ref(0);
|
||
|
|
const listQuery = ref({
|
||
|
|
pageCurrent: 1,
|
||
|
|
pageSize: 20,
|
||
|
|
jczmc: "",
|
||
|
|
ssbmdm: ""
|
||
|
|
});
|
||
|
|
const tableData = ref([]);
|
||
|
|
const loading = ref(false);
|
||
|
|
const emits = defineEmits(["update:modelValue", "choosedJcz"]);
|
||
|
|
const closed = () => {
|
||
|
|
listQuery.value.jczmc = "";
|
||
|
|
emits("update:modelValue", false);
|
||
|
|
};
|
||
|
|
const reset = () => {
|
||
|
|
listQuery.value = {
|
||
|
|
pageCurrent: 1,
|
||
|
|
pageSize: 20,
|
||
|
|
jczmc: "",
|
||
|
|
ssbmdm: ""
|
||
|
|
};
|
||
|
|
getListData();
|
||
|
|
};
|
||
|
|
// 判断传进来的选中数据和加载的选中数据不满足的数据
|
||
|
|
const checkopenList = ref([]);
|
||
|
|
|
||
|
|
// 确定选中
|
||
|
|
const onComfirm = () => {
|
||
|
|
//单选
|
||
|
|
if (props.Single) {
|
||
|
|
if (![ridioIndex.value][0]) {
|
||
|
|
proxy.$message.warning("请选择环林卡口");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const info = tableData.value.find((item) => {
|
||
|
|
return item.id === ridioIndex.value;
|
||
|
|
});
|
||
|
|
emits("choosedJcz", JSON.parse(JSON.stringify(info)));
|
||
|
|
} else {
|
||
|
|
//多选
|
||
|
|
const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
|
||
|
|
if (jczList.length === 0) {
|
||
|
|
proxy.$message.warning("请选择环林卡口");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
emits("choosedJcz", [...jczList, ...checkopenList.value]);
|
||
|
|
}
|
||
|
|
closed();
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
getListData();
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* pageSize 改变触发
|
||
|
|
*/
|
||
|
|
const handleSizeChange = (currentSize) => {
|
||
|
|
listQuery.value.pageSize = currentSize;
|
||
|
|
getListData();
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 页码改变触发
|
||
|
|
*/
|
||
|
|
const handleCurrentChange = (currentPage) => {
|
||
|
|
listQuery.value.pageCurrent = currentPage;
|
||
|
|
getListData();
|
||
|
|
};
|
||
|
|
//检查站数据
|
||
|
|
const getListData = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
ysSxtgetPageList(listQuery.value)
|
||
|
|
.then((res) => {
|
||
|
|
tableData.value = res?.records;
|
||
|
|
loading.value = false;
|
||
|
|
multipleUser(props.data, tableData.value);
|
||
|
|
total.value = Number(res.total);
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
loading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const handleFilter = () => {
|
||
|
|
listQuery.value.pageCurrent = 1;
|
||
|
|
getListData();
|
||
|
|
};
|
||
|
|
|
||
|
|
const multipleUserRef = ref(null);
|
||
|
|
const multipleSelectionUser = ref([]);
|
||
|
|
const handleSelectionChange = (val) => {
|
||
|
|
multipleSelectionUser.value = val;
|
||
|
|
if (checkopenList.value) {
|
||
|
|
for (let i = 0; i < multipleSelectionUser.value.length; i++) {
|
||
|
|
const l = multipleSelectionUser.value[i];
|
||
|
|
for (let j = 0; j < checkopenList.value.length; j++) {
|
||
|
|
const z = checkopenList.value[j];
|
||
|
|
if (l.id == z.id) {
|
||
|
|
checkopenList.value.splice(j, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
//回显--用于多选表格
|
||
|
|
function multipleUser(row, list) {
|
||
|
|
if (row) {
|
||
|
|
if (props.Single) {
|
||
|
|
row.forEach((item) => {
|
||
|
|
list.forEach((select) => {
|
||
|
|
if (typeof item == "object") {
|
||
|
|
if (item.id == select.id) {
|
||
|
|
ridioIndex.value = item.id;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (item == select.id) {
|
||
|
|
ridioIndex.value = item;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
row.forEach((item) => {
|
||
|
|
list.forEach((select) => {
|
||
|
|
if (item.id == select.id) {
|
||
|
|
if (multipleUserRef.value) {
|
||
|
|
multipleUserRef.value.toggleRowSelection(select, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
watch(
|
||
|
|
() => props.modelValue,
|
||
|
|
(val) => {
|
||
|
|
if (val === true) {
|
||
|
|
ridioIndex.value = "";
|
||
|
|
handleFilter();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
watch(
|
||
|
|
() => props.data,
|
||
|
|
(val) => {
|
||
|
|
if (multipleUserRef.value) multipleUser(val, tableData.value);
|
||
|
|
checkopenList.value = JSON.parse(JSON.stringify(val));
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "@/assets/css/layout.scss";
|
||
|
|
@import "@/assets/css/element-plus.scss";
|
||
|
|
::v-deep .el-form--inline {
|
||
|
|
padding-left: 0 !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-radio__label {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table__body tr.current-row > td.el-table__cell {
|
||
|
|
// background: #106fdc;
|
||
|
|
}
|
||
|
|
</style>
|