<template>
|
<el-dialog v-model="visible" title="选择设备" width="1100" @close="handleClose" destroy-on-close
|
:close-on-click-modal="false" :close-on-press-escape="false">
|
<div class="form-card ">
|
<el-form :model="queryParams" :inline="true" label-width="48px">
|
<el-form-item label="编码" prop="code">
|
<el-input v-model="queryParams.code" placeholder="输入编码" />
|
</el-form-item>
|
<el-form-item label="名称" prop="meterName">
|
<el-input v-model="queryParams.meterName" placeholder="输入名称" />
|
</el-form-item>
|
<el-form-item label="种类" prop="meterType">
|
<el-select v-model="queryParams.meterType" placeholder="选择种类" style="width: 170px;">
|
<el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class='table-box'>
|
<el-table v-loading="loading" row-key="id" :data="tableData" @select="handleSelectChange"
|
@select-all="handleSelectionAllChange" height="50vh" ref="deviceSettingTable">
|
<el-table-column type="selection" width="55" align="center" row-key="id" :reserve-selection="true" />
|
<el-table-column label="器具编码" prop="code" show-overflow-tooltip align="center" />
|
<el-table-column label="器具名称" prop="meterName" show-overflow-tooltip align="center" />
|
<el-table-column label="器具种类" prop="meterType" :formatter="meterTypeFormat" show-overflow-tooltip
|
align="center" />
|
<!-- <el-table-column label="规格型号" prop="modelNumber" show-overflow-tooltip align="center" /> -->
|
<el-table-column label="配电室" prop="installactionLocation" show-overflow-tooltip align="center" />
|
<!-- <el-table-column label="状态" width="85" prop="meterStatus" :formatter="meterStatusFormat" show-overflow-tooltip
|
align="center" /> -->
|
</el-table>
|
</div>
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
<div slot="footer" class="text-right">
|
<el-button type="primary" @click="handleOk">确定</el-button>
|
<el-button @click="handleClose">取消</el-button>
|
</div>
|
|
</el-dialog>
|
|
</template>
|
<script setup>
|
import { listImplement } from '@/api/modelConfiguration/businessModel'
|
import { ref } from 'vue';
|
let visible = ref(false)
|
let { proxy } = getCurrentInstance()
|
const { sys_device_type } = proxy.useDict("sys_device_type");
|
const { meter_status } = proxy.useDict("meter_status");
|
|
// 种类字典翻译
|
function meterTypeFormat(row, column) {
|
return proxy.selectDictLabel(sys_device_type.value, row.meterType);
|
}
|
// 状态字典翻译
|
function meterStatusFormat(row, column) {
|
return proxy.selectDictLabel(meter_status.value, row.meterStatus);
|
}
|
|
let tableData = ref([])
|
let total = ref(0);
|
let queryParams = ref({
|
code: null,
|
meterName:null,
|
meterType: null,
|
pageNum: 1,
|
pageSize: 10,
|
})
|
let loading = ref(false)
|
let deviceSettingTable = ref(null)
|
|
function getList() {
|
loading.value = true;
|
listImplement(queryParams.value).then(response => {
|
tableData.value = response.rows
|
total.value = response.total
|
loading.value = false
|
nextTick(function () {
|
deviceSettingTable.value.data.forEach(rowData => {
|
let exist = selectedDevice.value.filter(f => f.id === rowData.id).length;
|
if (exist > 0) {
|
deviceSettingTable.value.toggleRowSelection(rowData, true);
|
}
|
});
|
});
|
})
|
}
|
|
function handleClose() {
|
visible.value = false
|
}
|
function handleQuery() {
|
queryParams.value.pageNum = 1;
|
getList();
|
}
|
function resetQuery() {
|
queryParams.value = {
|
code: null,
|
meterType: null,
|
meterName:null,
|
pageNum: 1,
|
pageSize: 10,
|
}
|
getList();
|
}
|
let selectedDevice = ref([])
|
function handleOpen(selectRow) {
|
selectedDevice.value = JSON.parse(JSON.stringify(selectRow))
|
visible.value = true
|
queryParams.value = {
|
pageNum: 1,
|
pageSize: 10,
|
|
}
|
getList()
|
}
|
|
//判断一下 是全选还是全选取消
|
function formatterSelect(selection, data) {
|
let idMap = {};
|
selection.forEach(item => {
|
idMap[item.id] = true;
|
});
|
let allIn = data.every(item => idMap.hasOwnProperty(item.id));
|
return allIn;
|
}
|
function handleSelectionAllChange(selection) {
|
if (formatterSelect(selection, tableData.value)) {
|
selection.forEach(row => {
|
let rowStatus = selectedDevice.value.filter(f => f.id == row.id).length;
|
if (rowStatus === 0) {
|
selectedDevice.value.push({
|
"id": row.id,
|
"code": row.code,
|
"meterName": row.meterName
|
});
|
}
|
});
|
} else {
|
selectedDevice.value = selectedDevice.value.filter(f => {
|
return !tableData.value.some(s => s.id == f.id);
|
});
|
}
|
}
|
|
function handleSelectChange(selection, row) {
|
let rowStatus = selection.filter(f => f.id === row.id).length;
|
if (rowStatus > 0) {
|
selectedDevice.value.push({
|
"id": row.id,
|
"code": row.code,
|
"meterName": row.meterName
|
});
|
} else {
|
selectedDevice.value = selectedDevice.value.filter(f => f.id !== row.id);
|
}
|
}
|
|
function handleOk() {
|
emit('deviceConfirmSelect', selectedDevice.value)
|
visible.value = false
|
}
|
defineExpose({ handleOpen });
|
let emit = defineEmits(['deviceConfirmSelect'])
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
@import "@/assets/styles/page.scss";
|
</style>
|
