电表同步
This commit is contained in:
parent
28c42576bc
commit
cf647a65fc
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" :rowSelection="rowSelection" :rowClassName="getRowClassName" @selection-change="handleSelectionChange" size="small">
|
||||
<template #tableTitle></template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="tq-electricity-businessTable" setup>
|
||||
import { ref, reactive, watch,computed } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { businessColumns } from '../electricity.data';
|
||||
import { businessListApi } from '../electricity.api';
|
||||
|
||||
const props = defineProps({
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select-change']);
|
||||
const queryParam = reactive<any>({});
|
||||
const tableRef = ref();
|
||||
const selectedRowIds = ref<Set<string | number>>(new Set());
|
||||
const allSelectedRows = ref<any[]>([]);
|
||||
|
||||
// 行类名函数
|
||||
const getRowClassName = (record) => {
|
||||
return selectedRowIds.value.has(record.address) ? 'selected-row' : '';
|
||||
};
|
||||
|
||||
watch(() => props.queryParams, (newParams) => {
|
||||
reload();
|
||||
}, { deep: true });
|
||||
|
||||
// 注册表格
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '已同步设备表',
|
||||
api: businessListApi,
|
||||
columns:businessColumns,
|
||||
size: 'small',
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: true,
|
||||
rowSelection: {type:'checkbox'},
|
||||
rowKey: 'id',
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
Object.assign(params, props.queryParams);
|
||||
params.selectedRowIds = Array.from(selectedRowIds.value)
|
||||
return params;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
|
||||
|
||||
function getTableAction(record) {
|
||||
const actions = [];
|
||||
if (selectedRowIds.value.has(record.address)) {
|
||||
actions.push({
|
||||
label: '取消',
|
||||
color: 'error',
|
||||
onClick: () => {
|
||||
removeSelected(record);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
actions.push({
|
||||
label: '变更',
|
||||
onClick: () => {
|
||||
toggleSelect(record);
|
||||
}
|
||||
});
|
||||
actions.push({
|
||||
label: '移除',
|
||||
onClick: () => {
|
||||
deleteSelect(record);
|
||||
}
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
}
|
||||
|
||||
function handleSelectionChange(selectedRowSet) {
|
||||
// console.log('当前选中数据:', selectedRowSet);
|
||||
allSelectedRows.value = selectedRowSet.rows;
|
||||
selectedRowKeys.value = selectedRowSet.keys;
|
||||
}
|
||||
|
||||
// 取消所有选中项
|
||||
function clearSelected(){
|
||||
// console.log('取消选择数据');
|
||||
selectedRowKeys.value = [];
|
||||
allSelectedRows.value = [];
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
// 切换选择状态
|
||||
const toggleSelect = (record) => {
|
||||
if (!selectedRowIds.value.has(record.address)) {
|
||||
selectedRowIds.value.add(record.address);
|
||||
}
|
||||
allSelectedRows.value = [];
|
||||
allSelectedRows.value.push(record);
|
||||
emit('editSelect');
|
||||
};
|
||||
|
||||
// 切换选择状态
|
||||
const deleteSelect = (record) => {
|
||||
if (!selectedRowIds.value.has(record.address)) {
|
||||
selectedRowIds.value.add(record.address);
|
||||
}
|
||||
allSelectedRows.value = [];
|
||||
allSelectedRows.value.push(record);
|
||||
emit('deleteSelect');
|
||||
};
|
||||
|
||||
// 移除选中项
|
||||
const removeSelected = (record) => {
|
||||
selectedRowIds.value.delete(record.address);
|
||||
emit('removeSelect',record);
|
||||
};
|
||||
|
||||
const updateSelection = (selectedRecords) => {
|
||||
selectedRowIds.value.clear();
|
||||
selectedRecords.forEach((value, key) => {
|
||||
selectedRowIds.value.add(key);
|
||||
});
|
||||
// 更新表格的选中状态
|
||||
if (registerTable) {
|
||||
registerTable.toggleRowSelection?.(Array.from(selectedRowIds.value), true);
|
||||
}
|
||||
};
|
||||
|
||||
function reloadData(){
|
||||
reload();
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
defineExpose({
|
||||
updateSelection,
|
||||
clearSelected,
|
||||
reloadData,
|
||||
allSelectedRows,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-current-time-display,
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//:deep(.ant-table-title) {
|
||||
// display: none !important;
|
||||
//}
|
||||
|
||||
:deep(.selected-row) {
|
||||
background-color: #e6f7ff !important;
|
||||
|
||||
&:hover td {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle></template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="tq-electricity-apiLogList" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import {nuFormSchema, nusColumns} from '../electricity.data';
|
||||
import {nuSyncListApi} from '../electricity.api';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
// const props = defineProps({
|
||||
// orgCode: '',
|
||||
// });
|
||||
const formRef = ref();
|
||||
const queryParam = reactive<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
const userStore = useUserStore();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext } = useListPage({
|
||||
tableProps: {
|
||||
title: '区域列表',
|
||||
api: nuSyncListApi,
|
||||
columns:nusColumns,
|
||||
canResize:false,
|
||||
showActionColumn: true,
|
||||
showTableSetting: false,
|
||||
showIndexColumn: true,
|
||||
formConfig: {
|
||||
//labelWidth: 120,
|
||||
schemas: nuFormSchema,
|
||||
autoSubmitOnEnter:false,
|
||||
showAdvancedButton:false,
|
||||
fieldMapToNumber: [
|
||||
],
|
||||
fieldMapToTime: [
|
||||
],
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
// queryParam.orgCode = props.orgCode //查对应机构数据
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const labelCol = reactive({
|
||||
xs:24,
|
||||
sm:8,
|
||||
xl:6,
|
||||
xxl:8
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 16,
|
||||
});
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
formRef.value.resetFields();
|
||||
selectedRowKeys.value = [];
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
// 编辑
|
||||
async function handleSelectNu(record: Recordable) {
|
||||
// console.log(record);
|
||||
emit('ok',record);
|
||||
}
|
||||
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '选择',
|
||||
onClick: handleSelectNu.bind(null, record)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function init(record,type) {
|
||||
// console.log("🚀 ~ init ~ record:", record)
|
||||
queryParam.orgCode = record.orgCode;
|
||||
reload();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<j-modal :title="title" width="70%" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||||
<SelectNuList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></SelectNuList>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import SelectNuList from './SelectNuList.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<number>(800);
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success','cancel']);
|
||||
const type = ref<string>('');
|
||||
|
||||
/**
|
||||
* 日志
|
||||
* @param record
|
||||
*/
|
||||
function showNuList(record,_type) {
|
||||
title.value = '选择区域';
|
||||
visible.value = true;
|
||||
type.value = _type;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback(params) {
|
||||
params.type = type.value;
|
||||
visible.value = false;
|
||||
emit('success',params);
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
let params = {'type':type.value};
|
||||
visible.value = false;
|
||||
emit('cancel',params);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showNuList,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" size="small">
|
||||
<template #tableTitle></template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="tq-electricity-selectedTable" setup>
|
||||
import { ref, reactive, watch,computed } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { selectedColumns } from '../electricity.data';
|
||||
|
||||
const props = defineProps({
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dataSource: { // 初始化数据
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select-change']);
|
||||
const queryParam = reactive<any>({});
|
||||
const tableRef = ref();
|
||||
const selectedRowIds = ref<Set<string | number>>(new Set());
|
||||
const allSelectedRows = ref<any[]>([]);
|
||||
|
||||
watch(() => props.dataSource, (newParams) => {
|
||||
// console.log(props.dataSource);
|
||||
// reload();
|
||||
// 使用表格实例的方法
|
||||
tableRef.value?.setTableData(newParams);
|
||||
}, { deep: true });
|
||||
|
||||
// 注册表格
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '已选择数据表',
|
||||
columns:selectedColumns,
|
||||
size: 'small',
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: true,
|
||||
rowSelection: {type:'checkbox'},
|
||||
rowKey: 'id',
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
Object.assign(params, props.queryParams);
|
||||
return params;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
|
||||
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '取消',
|
||||
color: 'error',
|
||||
onClick: () => {
|
||||
removeSelected(record);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// 移除选中项
|
||||
const removeSelected = (record) => {
|
||||
emit('removeSelect',record);
|
||||
};
|
||||
|
||||
function reloadData(){
|
||||
reload();
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
defineExpose({
|
||||
reloadData,
|
||||
allSelectedRows,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-current-time-display,
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.selected-row) {
|
||||
background-color: #e6f7ff !important;
|
||||
|
||||
&:hover td {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" :rowSelection="rowSelection" :rowClassName="getRowClassName" @selection-change="handleSelectionChange" size="small">
|
||||
<template #tableTitle></template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="tq-electricity-sourceTable" setup>
|
||||
import { ref, reactive, watch,computed } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { selectedSourceColumns,unselectedSourceColumns } from '../electricity.data';
|
||||
import { sourceListApi } from '../electricity.api';
|
||||
|
||||
const props = defineProps({
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select-change']);
|
||||
const queryParam = reactive<any>({});
|
||||
const tableRef = ref();
|
||||
const selectedRowIds = ref<Set<string | number>>(new Set());
|
||||
const allSelectedRows = ref<any[]>([]);
|
||||
|
||||
// 行类名函数
|
||||
const getRowClassName = (record) => {
|
||||
return selectedRowIds.value.has(record.address) ? 'selected-row' : '';
|
||||
};
|
||||
|
||||
watch(() => props.queryParams, (newParams) => {
|
||||
reload();
|
||||
}, { deep: true });
|
||||
|
||||
const tableColumns = computed(() => {
|
||||
return props.queryParams.viewType === 'selected' ? selectedSourceColumns : unselectedSourceColumns;
|
||||
});
|
||||
|
||||
// 注册表格
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '设备源表',
|
||||
api: sourceListApi,
|
||||
columns:tableColumns,
|
||||
size: 'small',
|
||||
showTableSetting: false,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
showIndexColumn: true,
|
||||
rowSelection: {type:'checkbox'},
|
||||
rowKey: 'id',
|
||||
actionColumn: {
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
},
|
||||
beforeFetch: async (params) => {
|
||||
Object.assign(params, props.queryParams);
|
||||
params.column = 'createTime'
|
||||
params.order = 'desc'
|
||||
params.selectedRowIds = Array.from(selectedRowIds.value)
|
||||
return params;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
|
||||
|
||||
function getTableAction(record) {
|
||||
const actions = [];
|
||||
if (selectedRowIds.value.has(record.address)) {
|
||||
actions.push({
|
||||
label: '取消',
|
||||
color: 'error',
|
||||
onClick: () => {
|
||||
removeSelected(record);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let label = '添加';
|
||||
if(record.nuId){
|
||||
label = '变更';
|
||||
}
|
||||
actions.push({
|
||||
label: label,
|
||||
onClick: () => {
|
||||
toggleSelect(record);
|
||||
}
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
}
|
||||
|
||||
function handleSelectionChange(selectedRowSet) {
|
||||
// console.log('当前选中数据:', selectedRowSet);
|
||||
allSelectedRows.value = selectedRowSet.rows;
|
||||
selectedRowKeys.value = selectedRowSet.keys;
|
||||
}
|
||||
|
||||
// 取消所有选中项
|
||||
function clearSelected(){
|
||||
// console.log('取消选择数据');
|
||||
selectedRowKeys.value = [];
|
||||
allSelectedRows.value = [];
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
// 切换选择状态
|
||||
const toggleSelect = (record) => {
|
||||
if (!selectedRowIds.value.has(record.address)) {
|
||||
selectedRowIds.value.add(record.address);
|
||||
}
|
||||
allSelectedRows.value = [];
|
||||
allSelectedRows.value.push(record);
|
||||
emit('addSelect');
|
||||
};
|
||||
|
||||
// 移除选中项
|
||||
const removeSelected = (record) => {
|
||||
selectedRowIds.value.delete(record.address);
|
||||
emit('removeSelect',record);
|
||||
};
|
||||
|
||||
const updateSelection = (selectedRecords) => {
|
||||
selectedRowIds.value.clear();
|
||||
selectedRecords.forEach((value, key) => {
|
||||
selectedRowIds.value.add(key);
|
||||
});
|
||||
// 更新表格的选中状态
|
||||
if (registerTable) {
|
||||
registerTable.toggleRowSelection?.(Array.from(selectedRowIds.value), true);
|
||||
}
|
||||
};
|
||||
|
||||
function reloadData(){
|
||||
reload();
|
||||
}
|
||||
|
||||
|
||||
// 暴露给父组件的方法
|
||||
defineExpose({
|
||||
updateSelection,
|
||||
clearSelected,
|
||||
reloadData,
|
||||
allSelectedRows,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-current-time-display,
|
||||
audio::-webkit-media-controls-time-remaining-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//:deep(.ant-table-title) {
|
||||
// display: none !important;
|
||||
//}
|
||||
|
||||
:deep(.selected-row) {
|
||||
background-color: #e6f7ff !important;
|
||||
|
||||
&:hover td {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
</template>
|
||||
<template #expandedRowRender="{ record, index, indent, expanded }">
|
||||
<a-table :columns="asyncSeedColumns" :data-source="record.seedList" :pagination="false" bordered
|
||||
class="z-table-class" size="small">
|
||||
<template #bodyCell="{ column }">
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="tq-electricity-asyncMain" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import {asyncMaincolumns, asyncSeedColumns, logFormSchema} from '../electricity.data';
|
||||
import { syncLogListApi } from '../electricity.api';
|
||||
import AsyncMainModal from './components/AsyncMainModal.vue'
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: 'orgCode',
|
||||
});
|
||||
const queryParam = reactive<any>({});
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '数据同步日志主表',
|
||||
api: syncLogListApi,
|
||||
columns: asyncMaincolumns,
|
||||
formConfig: {
|
||||
schemas: logFormSchema
|
||||
},
|
||||
canResize: false,
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
showActionColumn: false,
|
||||
beforeFetch: async (params) => {
|
||||
queryParam.departServerUrl = props.orgCode
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
searchQuery
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
padding: 0;
|
||||
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ant-form-item:not(.ant-form-item-with-help) {
|
||||
margin-bottom: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.darkened-table) {
|
||||
.ant-table-thead>tr>th {
|
||||
background-color: #dadadaee;
|
||||
}
|
||||
.ant-table-tbody>tr>td {
|
||||
background-color: #f3f3f3f5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:deep(.z-table-class) {
|
||||
.ant-table-thead>tr>th {
|
||||
background-color: #e6f0fd;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
background-color: #FBFBFB;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
sourceList = '/iot/tq/electricityMeter/sourceList',
|
||||
departList = '/iot/tq/electricityMeter/departList',
|
||||
nuList = '/iot/tq/electricityMeter/nuList',
|
||||
businessList = '/iot/tq/electricityMeter/businessList',
|
||||
nuSyncList = '/iot/tq/electricityMeter/nuSyncList',
|
||||
syncDevices = '/iot/tq/electricityMeter/syncDevices',
|
||||
syncLogList = '/iot/tq/electricityMeter/syncLogList',
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const sourceListApi = (params) => defHttp.get({ url: Api.sourceList, params });
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const departListApi = (params) => defHttp.get({ url: Api.departList, params });
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const nuListApi = (params) => defHttp.get({ url: Api.nuList, params });
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const businessListApi = (params) => defHttp.get({ url: Api.businessList, params });
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const nuSyncListApi = (params) => defHttp.get({ url: Api.nuSyncList, params });
|
||||
/**
|
||||
* 同步设备
|
||||
* @param params
|
||||
*/
|
||||
export const syncDevicesApi = (params) => {
|
||||
return defHttp.post({ url: Api.syncDevices, params });
|
||||
}
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const syncLogListApi = (params) => defHttp.get({ url: Api.syncLogList, params });
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
import {BasicColumn, FormSchema} from '/@/components/Table';
|
||||
|
||||
export const businessColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: 'center',
|
||||
dataIndex: 'address',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '区域编码',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
align: "center",
|
||||
dataIndex: 'nuName',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域标签',
|
||||
align: "center",
|
||||
dataIndex: 'areaFlag_dictText',
|
||||
resizable: true,
|
||||
}
|
||||
];
|
||||
|
||||
//列表数据
|
||||
export const unselectedSourceColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: 'center',
|
||||
dataIndex: 'address',
|
||||
width: 140,
|
||||
},
|
||||
];
|
||||
|
||||
//列表数据
|
||||
export const selectedSourceColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: 'center',
|
||||
dataIndex: 'address',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '机构',
|
||||
align: "center",
|
||||
dataIndex: 'departName',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域编码',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
align: "center",
|
||||
dataIndex: 'nuName',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域标签',
|
||||
align: "center",
|
||||
dataIndex: 'areaFlag_dictText',
|
||||
resizable: true,
|
||||
},
|
||||
];
|
||||
|
||||
export const nusColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '区域编码',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
align: "center",
|
||||
dataIndex: 'nuName',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域标签',
|
||||
align: "center",
|
||||
dataIndex: 'areaFlag_dictText',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '绑定设备数量',
|
||||
align: "center",
|
||||
dataIndex: 'deviceNum'
|
||||
}
|
||||
];
|
||||
|
||||
export const nuFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '区域标签',
|
||||
field: 'areaFlag',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
dictCode: 'nu_type',
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const selectedColumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: 'center',
|
||||
dataIndex: 'address',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '操作区域',
|
||||
align: 'center',
|
||||
dataIndex: 'dataTypeText',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
align: 'center',
|
||||
dataIndex: 'actionType',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '区域编码',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
align: "center",
|
||||
dataIndex: 'nuName',
|
||||
resizable: true,
|
||||
},
|
||||
{
|
||||
title: '区域标签',
|
||||
align: "center",
|
||||
dataIndex: 'areaFlag_dictText',
|
||||
resizable: true,
|
||||
}
|
||||
];
|
||||
|
||||
export const asyncMaincolumns: BasicColumn[] = [
|
||||
{
|
||||
title: 'SN',
|
||||
align: 'center',
|
||||
dataIndex: 'sn',
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
align: "center",
|
||||
dataIndex: 'deviceName',
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
align: "center",
|
||||
dataIndex: 'serverType',
|
||||
},
|
||||
{
|
||||
title: '同步时间',
|
||||
align: "center",
|
||||
dataIndex: 'createTime',
|
||||
}
|
||||
];
|
||||
|
||||
export const asyncSeedColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '同步类型',
|
||||
align: "center",
|
||||
dataIndex: 'syncType',
|
||||
},
|
||||
{
|
||||
title: '同步状态',
|
||||
align: "center",
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
title: '同步时间',
|
||||
align: "center",
|
||||
dataIndex: 'createTime',
|
||||
},
|
||||
{
|
||||
title: '现机构',
|
||||
align: "center",
|
||||
dataIndex: 'departName',
|
||||
},
|
||||
{
|
||||
title: '现区域',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
},
|
||||
{
|
||||
title: '原机构',
|
||||
align: "center",
|
||||
dataIndex: 'oldDepartName',
|
||||
},
|
||||
{
|
||||
title: '原区域',
|
||||
align: "center",
|
||||
dataIndex: 'oldNuId',
|
||||
},
|
||||
];
|
||||
|
||||
export const logFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: 'SN',
|
||||
field: 'sn',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入SN',
|
||||
},
|
||||
// colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,561 @@
|
|||
<template>
|
||||
<OrgSelectComponent ref="orgSelectComRef" @orgChanged="orgChanged" @orgReset="orgReset"></OrgSelectComponent>
|
||||
|
||||
<div class="p-2 base-class" style="margin-top: -0.5rem;" v-if="showDevices">
|
||||
<!-- <div class="p-2 base-class" style="margin-top: -0.5rem;">-->
|
||||
<a-card class="container" v-show="toggleSearchStatus && tabActiveKey == 'dataAsync'" >
|
||||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="4">
|
||||
<a-form-item name="dataType">
|
||||
<template #label><span title="dataType">操作源</span></template>
|
||||
<a-select v-model:value="dataType" placeholder="请选择来源" allowClear @change="dataTypeChanged(dataType)">
|
||||
<a-select-option value="source" key="source">源数据</a-select-option>
|
||||
<a-select-option value="business" key="business">已同步</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-form-item name="sn">
|
||||
<template #label><span title="SN">SN</span></template>
|
||||
<a-input v-model:value="queryParam.address" placeholder="请输入SN" allowClear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4" v-show="viewType =='selected'||dataType=='business'">
|
||||
<a-form-item name="departId">
|
||||
<template #label><span title="机构">机构</span></template>
|
||||
<a-select v-model:value="queryParam.departId" placeholder="请选择机构" allowClear @change="handleDepartChange">
|
||||
<a-select-option :value="item.departId" v-for="item in departList" :key="item.departId">{{item.departName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4" v-show="viewType =='selected'||dataType=='business'">
|
||||
<a-form-item name="nuId">
|
||||
<template #label><span title="区域">区域</span></template>
|
||||
<a-select v-model:value="queryParam.nuId" placeholder="请选择区域" allowClear>
|
||||
<a-select-option :value="item.nuId" v-for="item in nuList" :key="item.nuId">{{item.nuName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4" v-show="viewType =='selected'||dataType=='business'">
|
||||
<a-form-item name="status">
|
||||
<template #label><span title="状态">状态</span></template>
|
||||
<a-select v-model:value="queryParam.status" placeholder="请选择状态" allowClear>
|
||||
<a-select-option value="0" key="0">正常</a-select-option>
|
||||
<a-select-option value="1" key="1">作废</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined"
|
||||
@click="searchQuery">查询</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
|
||||
style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card class="container">
|
||||
<div class="tab-header-container" v-if="showDevices">
|
||||
<!-- <div class="tab-header-container">-->
|
||||
<a-tabs v-model:activeKey="tabActiveKey" class="tabs-container">
|
||||
<a-tab-pane key="dataAsync" tab="数据同步">
|
||||
<a-card>
|
||||
<a-row>
|
||||
<a-col :span="sourceScreenSpan">
|
||||
<div style="height: 16px;margin-left: 15px">
|
||||
<a-tag color="#2DB7F5">源数据</a-tag>
|
||||
<a-radio-group v-model:value="viewType" size="small" style="margin-left: 10px;" @change="viewTypeChanged(viewType)">
|
||||
<a-radio-button value="unselected">未选择</a-radio-button>
|
||||
<a-radio-button value="selected">已选择</a-radio-button>
|
||||
</a-radio-group>
|
||||
<div class="toggle-add-button-container">
|
||||
<a-button type="primary" size="small" @click="handleAddSourceSelect"
|
||||
style="margin-left: 8px">{{sourceButtonText}}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<SourceTable ref="sourceComRef" :queryParams="sourceParam" @addSelect="handleAddSourceSelect" @removeSelect="handleRemoveSourceSelect"/>
|
||||
</a-col>
|
||||
<a-col :span="selectedScreenSpan">
|
||||
<div style="height: 16px;margin-left: 15px">
|
||||
<a-tag color="#2db7f5">待同步
|
||||
<span style="font-size: 13px;font-weight: bold;">{{ ' ' + Array.from(allSelectedItems.values()).length + ' ' }}</span>条
|
||||
</a-tag>
|
||||
<a-radio-group v-model:value="businessView" size="small" style="margin-left: 10px;">
|
||||
<a-radio-button value="unselected">待同步</a-radio-button>
|
||||
<a-radio-button value="selected">已同步</a-radio-button>
|
||||
</a-radio-group>
|
||||
<div class="toggle-add-button-container" v-show="businessView=='selected'">
|
||||
<a-button type="primary" size="small" @click="handleEditBusinessSelect" style="margin-left: 8px">调整</a-button>
|
||||
<a-button type="primary" size="small" @click="handleDeleteBusinessSelect" style="margin-left: 8px">移除</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<SelectedTable v-show="businessView=='unselected'" ref="selectedComRef" :dataSource="Array.from(allSelectedItems.values())" @removeSelect="handleRemoveSelect"/>
|
||||
<BusinessTable v-show="businessView=='selected'" ref="businessComRef" :queryParams="businessParam" @editSelect="handleEditBusinessSelect" @deleteSelect="handleDeleteBusinessSelect" @removeSelect="handleRemoveBusinessSelect"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="syncLogList" tab="同步历史">
|
||||
<SyncLogList ref="syncLogListRef" :orgCode="orgData.orgCode"></SyncLogList>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="toggle-button-container">
|
||||
<a-button type="primary" size="small" @click.stop="refreshHistory()" style="margin-right: 10px;"
|
||||
v-show="tabActiveKey == 'syncLogList'">
|
||||
<span>刷新</span>
|
||||
</a-button>
|
||||
<a-button type="warning" size="small" @click.stop="handleAsync()"
|
||||
style="margin-left: 5px;margin-right: 5px;" v-show="tabActiveKey == 'dataAsync'">
|
||||
<span>同步</span>
|
||||
</a-button>
|
||||
<a-divider type="vertical" style="background-color: #CDCDCF"
|
||||
v-show="tabActiveKey == 'dataAsync'" />
|
||||
<a-button type="primary" size="small" @click.stop="handleReload"
|
||||
v-show="tabActiveKey == 'dataAsync'" style="margin-left: 8px">还原</a-button>
|
||||
<a-divider type="vertical" style="background-color: #CDCDCF"
|
||||
v-show="tabActiveKey == 'dataAsync'" />
|
||||
<a-radio-group v-model:value="splitVal" button-style="solid" size="small"
|
||||
@change="splitScreenChanged" style="margin-left: 5px;margin-right: 5px;"
|
||||
v-show="tabActiveKey == 'dataAsync'">
|
||||
<a-radio-button value="sc">源数据</a-radio-button>
|
||||
<a-radio-button value="sc2sed1">分屏1</a-radio-button>
|
||||
<a-radio-button value="sc1sed1">分屏2</a-radio-button>
|
||||
<a-radio-button value="sc1sed2">分屏3</a-radio-button>
|
||||
<a-radio-button value="sed">已选择</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-divider type="vertical" style="background-color: #CDCDCF" v-show="tabActiveKey == 'dataAsync'" />
|
||||
<a @click="toggleSearchStatus = !toggleSearchStatus" class="toggle-button" v-show="tabActiveKey == 'dataAsync'"
|
||||
style="margin-left: 5px;margin-right: 5px;">
|
||||
{{ toggleSearchStatus ? '收缩' : '展开' }}
|
||||
<Icon :icon="toggleSearchStatus ? 'humbleicons:align-objects-top' : 'humbleicons:align-objects-bottom'" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<SelectNuModal ref="selectNuModal" @success="selectNuHandleSuccess" @cancel="selectNuHandleCancel"></SelectNuModal>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup name="tq-electricity-index" lang="ts">
|
||||
|
||||
import {ref, reactive, onMounted, watch} from 'vue'
|
||||
import OrgSelectComponent from '../../components/OrgSelect.vue'
|
||||
import SourceTable from './components/SourceTable.vue'
|
||||
import SelectedTable from './components/SelectedTable.vue'
|
||||
import BusinessTable from './components/BusinessTable.vue'
|
||||
import SelectNuModal from './components/SelectNuModal.vue'
|
||||
import SyncLogList from './components/SyncLogList.vue'
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import {departListApi, nuListApi, syncDevicesApi} from './electricity.api';
|
||||
import {selectedColumns} from './electricity.data';
|
||||
const { createMessage } = useMessage();
|
||||
const orgSelectComRef = ref(null);
|
||||
const showDevices = ref(false);
|
||||
const selectNuModal = ref();
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 4,
|
||||
xl: 6,
|
||||
xxl: 5
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
const queryParam = ref({status: '0'})//源数据查询参数
|
||||
const sourceParam = ref({viewType: 'unselected',departServerUrl:'',status: '0'})//源数据查询参数
|
||||
const businessParam = ref({departServerUrl:'',status: '0'})//源数据查询参数
|
||||
const sourceComRef = ref();
|
||||
const selectedComRef = ref();
|
||||
const businessComRef = ref();
|
||||
const syncLogListRef = ref();
|
||||
const toggleSearchStatus = ref<boolean>(true);
|
||||
|
||||
const tabActiveKey = ref('dataAsync');
|
||||
const sourceScreenSpan = ref(12);
|
||||
const selectedScreenSpan = ref(12);
|
||||
const sourceButtonText = ref('添加');
|
||||
//源数据查询参数
|
||||
const dataType = ref('source');
|
||||
const viewType = ref('unselected');
|
||||
const businessView = ref('unselected');
|
||||
const splitVal = ref<string>('sc1sed1');
|
||||
const orgData = ref();
|
||||
const allSelectedItems = ref<Map<string | number, any>>(new Map());
|
||||
const selectedItems = ref([]);//已选择数据
|
||||
/**
|
||||
* 机构变更
|
||||
*/
|
||||
const orgChanged = async (org) => {
|
||||
orgData.value = org;
|
||||
viewType.value = 'unselected';
|
||||
businessView.value = 'unselected';
|
||||
tabActiveKey.value = 'dataAsync';
|
||||
//清空当前选择
|
||||
allSelectedItems.value.clear();
|
||||
//清空查询条件
|
||||
queryParam.value = {status: '0'};
|
||||
//源数据
|
||||
sourceParam.value = { viewType: 'unselected',departServerUrl:org.orgCode,status: '0'};
|
||||
//已选择
|
||||
businessParam.value = {departServerUrl: org.orgCode};
|
||||
// 切换视图
|
||||
orgSelectComRef?.value?.resetOrgSelectedCon(false);
|
||||
showDevices.value = true;
|
||||
toggleSearchStatus.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 机构变更
|
||||
*/
|
||||
const orgReset = async (org) => {
|
||||
showDevices.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
if(dataType.value=='source'){
|
||||
sourceParam.value.address = queryParam.value.address;
|
||||
sourceParam.value.departId = queryParam.value.departId;
|
||||
sourceParam.value.nuId = queryParam.value.nuId;
|
||||
sourceParam.value.status = queryParam.value.status;
|
||||
sourceComRef.value.reloadData();
|
||||
}else{
|
||||
businessParam.value.address = queryParam.value.address;
|
||||
businessParam.value.departId = queryParam.value.departId;
|
||||
businessParam.value.nuId = queryParam.value.nuId;
|
||||
businessParam.value.status = queryParam.value.status;
|
||||
businessComRef.value.reloadData();
|
||||
}
|
||||
}
|
||||
|
||||
function searchReset() {
|
||||
queryParam.value = {
|
||||
status: '0'
|
||||
};
|
||||
if(dataType.value=='source'){
|
||||
let vt = sourceParam.value.viewType;
|
||||
let dsu = sourceParam.value.departServerUrl;
|
||||
sourceParam.value = { viewType: vt,departServerUrl:dsu,status: '0' };
|
||||
}else{
|
||||
let dsu = businessParam.value.departServerUrl;
|
||||
businessParam.value = { departServerUrl: dsu,status: '0' };
|
||||
}
|
||||
}
|
||||
|
||||
const splitScreenChanged = (val) => {
|
||||
let v_ = val.target.value;
|
||||
if (v_ == 'sc') {
|
||||
sourceScreenSpan.value = 24;
|
||||
selectedScreenSpan.value = 0;
|
||||
}
|
||||
if (v_ == 'sc2sed1') {
|
||||
sourceScreenSpan.value = 16;
|
||||
selectedScreenSpan.value = 8;
|
||||
}
|
||||
if (v_ == 'sc1sed1') {
|
||||
sourceScreenSpan.value = 12;
|
||||
selectedScreenSpan.value = 12;
|
||||
}
|
||||
if (v_ == 'sc1sed2') {
|
||||
sourceScreenSpan.value = 8;
|
||||
selectedScreenSpan.value = 16;
|
||||
}
|
||||
if (v_ == 'sed') {
|
||||
sourceScreenSpan.value = 0;
|
||||
selectedScreenSpan.value = 24;
|
||||
}
|
||||
};
|
||||
|
||||
const dataTypeChanged = (value) => {
|
||||
if(value=='source'){
|
||||
if(viewType.value=='selected'){
|
||||
sourceButtonText.value = '变更';
|
||||
const departServerUrl = sourceParam.value.departServerUrl;
|
||||
getDepartList({dataType:'source',departServerUrl:departServerUrl});
|
||||
getNuList({dataType:'source',departServerUrl:departServerUrl});
|
||||
}else{
|
||||
sourceButtonText.value = '添加';
|
||||
}
|
||||
}else{
|
||||
const departServerUrl = businessParam.value.departServerUrl;
|
||||
getDepartList({dataType:'business',departServerUrl:departServerUrl});
|
||||
getNuList({dataType:'business',departServerUrl:departServerUrl});
|
||||
}
|
||||
}
|
||||
|
||||
const viewTypeChanged = (value) => {
|
||||
sourceButtonText.value = '添加';
|
||||
sourceParam.value.viewType = value
|
||||
if(value=='selected'){
|
||||
const departServerUrl = sourceParam.value.departServerUrl;
|
||||
sourceButtonText.value = '变更';
|
||||
getDepartList({dataType:'source',departServerUrl:departServerUrl});
|
||||
getNuList({dataType:'source',departServerUrl:departServerUrl});
|
||||
}
|
||||
}
|
||||
|
||||
const departList = ref();
|
||||
async function getDepartList(record){
|
||||
departList.value = await departListApi(record);
|
||||
}
|
||||
|
||||
const nuList = ref();
|
||||
async function getNuList(record){
|
||||
nuList.value = await nuListApi(record);
|
||||
}
|
||||
|
||||
async function handleDepartChange(record){
|
||||
let params = {departId:record,dataType:'',departServerUrl:''};
|
||||
if(dataType.value=='source'){
|
||||
params.dataType = 'source';
|
||||
params.departServerUrl = sourceParam.value.departServerUrl;
|
||||
}else{
|
||||
params.dataType = 'business';
|
||||
params.departServerUrl = businessParam.value.departServerUrl;
|
||||
}
|
||||
nuList.value = await nuListApi(params);
|
||||
}
|
||||
|
||||
const handleRemoveFromRight = (key: string | number) => {
|
||||
selectedItems.value.delete(key);
|
||||
sourceComRef.value?.removeSelectedItem?.(key);
|
||||
};
|
||||
|
||||
function handleAddSourceSelect(){
|
||||
const allSelectedRows = sourceComRef.value.allSelectedRows;
|
||||
if (allSelectedRows && allSelectedRows.length > 0) {
|
||||
selectNuModal.value.disableSubmit = true;
|
||||
selectNuModal.value.showNuList(orgData.value,'source');
|
||||
}else{
|
||||
createMessage.warning('请先选择源数据');
|
||||
}
|
||||
}
|
||||
|
||||
function handleEditBusinessSelect(){
|
||||
const allSelectedRows = businessComRef.value.allSelectedRows;
|
||||
if (allSelectedRows && allSelectedRows.length > 0) {
|
||||
selectNuModal.value.disableSubmit = true;
|
||||
selectNuModal.value.showNuList(orgData.value,'business');
|
||||
}else{
|
||||
createMessage.warning('请先选择已同步数据');
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeleteBusinessSelect(){
|
||||
const businessSelectedRows = businessComRef.value.allSelectedRows;
|
||||
if (businessSelectedRows && businessSelectedRows.length > 0) {
|
||||
businessSelectedRows.forEach(record => {
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
let item = {};
|
||||
item["address"] = record.address;
|
||||
item["actionType"] = '删除';
|
||||
item["dataType"] = 'business';
|
||||
item["dataTypeText"] = '已同步区';
|
||||
item["nuId"] = record.nuId;
|
||||
item["nuName"] = record.nuName;
|
||||
item["areaFlag_dictText"] = record.areaFlag_dictText;
|
||||
item["orgCode"] = '';
|
||||
item["departId"] = '';
|
||||
item["departName"] = '';
|
||||
item["oldOrgCode"] = record.departServerUrl;
|
||||
item["oldDepartId"] = record.departId;
|
||||
item["oldDepartName"] = record.departName;
|
||||
allSelectedItems.value.set(record.address, item);
|
||||
});
|
||||
updateBusinessSelection();
|
||||
}
|
||||
}
|
||||
|
||||
function handleRemoveSourceSelect(record){
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
updateSourceSelection();
|
||||
}
|
||||
|
||||
function handleRemoveBusinessSelect(record){
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
updateBusinessSelection();
|
||||
}
|
||||
|
||||
function handleRemoveSelect(record){
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
if(record.dataType == 'source'){
|
||||
updateSourceSelection();
|
||||
}
|
||||
if(record.dataType == 'business'){
|
||||
updateBusinessSelection();
|
||||
}
|
||||
}
|
||||
|
||||
function selectNuHandleSuccess(nuInfo){
|
||||
if(nuInfo.type == 'source'){
|
||||
const sourceSelectedRows = sourceComRef.value.allSelectedRows;
|
||||
if (sourceSelectedRows && sourceSelectedRows.length > 0) {
|
||||
sourceSelectedRows.forEach(record => {
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
let item = {};
|
||||
item["address"] = record.address;
|
||||
item["actionType"] = sourceButtonText.value;
|
||||
item["dataType"] = 'source';
|
||||
item["dataTypeText"] = '源数据区';
|
||||
item["nuId"] = nuInfo.nuId;
|
||||
item["nuName"] = nuInfo.nuName;
|
||||
item["areaFlag_dictText"] = nuInfo.areaFlag_dictText;
|
||||
item["orgCode"] = orgData.value.orgCode;
|
||||
item["departId"] = orgData.value.orgId;
|
||||
item["departName"] = orgData.value.departName;
|
||||
item["oldOrgCode"] = record.departServerUrl;
|
||||
item["oldDepartId"] = record.departId;
|
||||
item["oldDepartName"] = record.departName;
|
||||
allSelectedItems.value.set(record.address, item);
|
||||
});
|
||||
updateSourceSelection();
|
||||
}
|
||||
}else{
|
||||
const businessSelectedRows = businessComRef.value.allSelectedRows;
|
||||
if (businessSelectedRows && businessSelectedRows.length > 0) {
|
||||
businessSelectedRows.forEach(record => {
|
||||
if (allSelectedItems.value.has(record.address)) {
|
||||
allSelectedItems.value.delete(record.address);
|
||||
}
|
||||
let item = {};
|
||||
item["address"] = record.address;
|
||||
item["actionType"] = '调整';
|
||||
item["dataType"] = 'business';
|
||||
item["dataTypeText"] = '已同步区';
|
||||
item["nuId"] = nuInfo.nuId;
|
||||
item["nuName"] = nuInfo.nuName;
|
||||
item["areaFlag_dictText"] = nuInfo.areaFlag_dictText;
|
||||
item["orgCode"] = orgData.value.orgCode;
|
||||
item["departId"] = orgData.value.orgId;
|
||||
item["departName"] = orgData.value.departName;
|
||||
item["oldOrgCode"] = record.departServerUrl;
|
||||
item["oldDepartId"] = record.departId;
|
||||
item["oldDepartName"] = record.departName;
|
||||
allSelectedItems.value.set(record.address, item);
|
||||
});
|
||||
updateBusinessSelection();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectNuHandleCancel(nuInfo){
|
||||
if(nuInfo.type == 'source'){
|
||||
updateSourceSelection();
|
||||
}else{
|
||||
updateBusinessSelection();
|
||||
}
|
||||
}
|
||||
|
||||
//清除源数据勾选和更新选中状态
|
||||
function updateSourceSelection(){
|
||||
//清空多选框勾选
|
||||
sourceComRef.value.clearSelected();
|
||||
// 更新左侧列表的选中状态
|
||||
sourceComRef.value?.updateSelection?.(allSelectedItems.value);
|
||||
}
|
||||
|
||||
//清除已选数据勾选和更新选中状态
|
||||
function updateBusinessSelection(){
|
||||
//清空多选框勾选
|
||||
businessComRef.value.clearSelected();
|
||||
// 更新左侧列表的选中状态
|
||||
businessComRef.value?.updateSelection?.(allSelectedItems.value);
|
||||
}
|
||||
|
||||
//还原
|
||||
function handleReload(){
|
||||
allSelectedItems.value.clear();
|
||||
updateSourceSelection();
|
||||
updateBusinessSelection();
|
||||
}
|
||||
|
||||
//同步
|
||||
async function handleAsync(){
|
||||
const arr = Array.from(allSelectedItems.value.values())
|
||||
await syncDevicesApi(arr);
|
||||
sourceComRef.value.reloadData();
|
||||
businessComRef.value.reloadData();
|
||||
handleReload();
|
||||
}
|
||||
|
||||
//刷新同步日志数据
|
||||
const refreshHistory = () => {
|
||||
syncLogListRef.value?.searchQuery()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ant-form-item{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.base-class {
|
||||
:deep(.ant-card .ant-card-body) {
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
width: 100%;
|
||||
|
||||
:deep(.ant-tabs-content) {
|
||||
height: calc(100% - 40px); // 减去tab标题高度
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-list-container {
|
||||
height: calc(100vh - 310px);
|
||||
overflow: auto;
|
||||
|
||||
:deep(.ant-table) {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-add-button-container {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.toggle-button-container {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue