设备维度-水表设备同步
This commit is contained in:
parent
58f448109f
commit
23d41237ed
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
|
||||||
|
enum Api {
|
||||||
|
getOrgInfo = '/admin/orgapplyinfo/orgApplyInfo/getOrgInfo',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取机构详细信息（包含sys_depart信息）
|
||||||
|
* @param params orgCode部门编码 不传查所有
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const getOrgInfo = (params) => defHttp.get({ url: Api.getOrgInfo, params });
|
||||||
|
|
@ -0,0 +1,417 @@
|
||||||
|
<template>
|
||||||
|
<div class="p-2 base-class">
|
||||||
|
<a-card class="base-con-class">
|
||||||
|
<div class="org-info-card">
|
||||||
|
<div class="org-info-header">
|
||||||
|
<div class="org-title">
|
||||||
|
<span class="base-info-label">机构信息:</span>
|
||||||
|
<span v-if="!orgData" class="base-info-dn" style="color: #ff4d4f;"> 请先选择机构</span>
|
||||||
|
<span v-else class="org-name">{{ orgData?.departName }}</span>
|
||||||
|
</div>
|
||||||
|
<a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset">
|
||||||
|
<span>重新选择</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="org-info-content">
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">机构编码：</span>
|
||||||
|
<span class="value">{{ orgData?.orgCode || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">加盟时间：</span>
|
||||||
|
<span class="value">{{ orgData?.franchiseTime?.substring(0, 10) || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">负责人：</span>
|
||||||
|
<span class="value">{{ orgData?.orgLeader || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">电话：</span>
|
||||||
|
<span class="value">{{ orgData?.orgLeaderPhone || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">地址：</span>
|
||||||
|
<span class="value">{{ orgData?.comRegisterAddress || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 con-class" style="margin-top: -10px;" v-show="orgSelectedCon">
|
||||||
|
<a-card :bordered="false" class="org-container">
|
||||||
|
<a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
|
||||||
|
<a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24"
|
||||||
|
:md="props.layout == 'full' ? 12 : 8"
|
||||||
|
:lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8"
|
||||||
|
:xxl="props.layout == 'full' ? 6 : 8"
|
||||||
|
style="padding: 8px;min-height: 290px;">
|
||||||
|
<div class="org-card" :class="{ 'active': item.orgId == orgData?.orgId }" @click="handleOrgSelected(item)">
|
||||||
|
<a-card
|
||||||
|
:class="{ 'selected-card': selectedOrgs.some(org => org.orgCode === item.orgCode) }"
|
||||||
|
style="width: 100%; border-radius: 8px; border:0px; "
|
||||||
|
:headStyle="{ height: '60px', padding: '0 24px' }"
|
||||||
|
:style="{ cursor: showChoose ? 'pointer' : 'default' }"
|
||||||
|
:bodyStyle="{ padding: '24px 24px 4px 24px !important' }">
|
||||||
|
<template #title>
|
||||||
|
<a-row style="font-weight: normal;">
|
||||||
|
<a-col :span="props.layout == 'full' ? 22 : 21" style="font-size: 14px; padding-top: 4px;">
|
||||||
|
<div>
|
||||||
|
<span style="font-weight: bold;">{{ item.departName }}</span>
|
||||||
|
<!-- 如果是已选择，显示"已选择" -->
|
||||||
|
<span style="color: green; font-size: 12px; margin-left: 8px;" v-if="selectedOrgs.some(org => org.orgCode === item.orgCode)">已选择</span>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="props.layout == 'full' ? 2 : 3" style="text-align: center; padding-top: 4px;">
|
||||||
|
<div class="zxClass">{{ item.orgCode }}</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
<p>加盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
|
||||||
|
<p>机构负责人：{{ item.orgLeader }}</p>
|
||||||
|
<p>负责人电话：{{ item.orgLeaderPhone }}</p>
|
||||||
|
<p :title="item.comRegisterAddress">
|
||||||
|
机构地址：{{ item.comRegisterAddress }}</p>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col v-if="orgTableList.length == 0">
|
||||||
|
<div style="margin: 30px auto;">
|
||||||
|
<a-empty/>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div
|
||||||
|
style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
|
||||||
|
v-show="props.layout == 'full'">
|
||||||
|
<span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
|
||||||
|
<Pagination showLessItems v-model:current="pageParams.pageNo"
|
||||||
|
:pageSize="pageParams.pageSize" size="small"
|
||||||
|
show-quick-jumper :total="orgTableList.total" @change="reload"/>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="synchronization-directive" setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue';
|
||||||
|
import {Empty} from 'ant-design-vue';
|
||||||
|
import {Modal} from 'ant-design-vue';
|
||||||
|
import { Pagination } from 'ant-design-vue'
|
||||||
|
import {getOrgInfo} from './OrgApplyInfo.api'
|
||||||
|
|
||||||
|
const emit = defineEmits(['orgChanged']);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
showChoose: {type: Boolean, default: false},
|
||||||
|
layout: {type: String, default: 'full'}, // 控制布局: 'full' 或 'half'
|
||||||
|
})
|
||||||
|
const orgTableList = ref<any>({records: [], total: 0})
|
||||||
|
|
||||||
|
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||||
|
|
||||||
|
|
||||||
|
interface OrganizationData {
|
||||||
|
orgId?: string;
|
||||||
|
departName: string;
|
||||||
|
orgCode: string;
|
||||||
|
franchiseTime?: string;
|
||||||
|
orgLeader?: string;
|
||||||
|
orgLeaderPhone?: string;
|
||||||
|
comRegisterAddress?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryParam = reactive<any>({})
|
||||||
|
const pageParams = ref({pageNo: 1, pageSize: 8})
|
||||||
|
const orgData = ref<OrganizationData | null>(null);
|
||||||
|
const orgSelectedCon = ref(true);
|
||||||
|
|
||||||
|
// 当前选中的卡片 ID 数组
|
||||||
|
const selectedOrgs = ref<string[]>([])
|
||||||
|
|
||||||
|
const handleOrgSelected = async (org) => {
|
||||||
|
if (!!orgData.value && orgData.value.orgId != org.orgId) {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '变更机构提醒',
|
||||||
|
content: '是否变更机构！',
|
||||||
|
okText: '确认',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk: async () => {
|
||||||
|
await loadOrgData(org);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await loadOrgData(org);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadOrgData = async (org) => {
|
||||||
|
// 更新机构数据
|
||||||
|
orgData.value = org;
|
||||||
|
emit('orgChanged', org)
|
||||||
|
};
|
||||||
|
|
||||||
|
const orgReset = () => {
|
||||||
|
orgSelectedCon.value = true;
|
||||||
|
emit('orgReset');
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetOrgSelectedCon = (v_) => {
|
||||||
|
orgSelectedCon.value = v_
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 数据加载 */
|
||||||
|
function reload() {
|
||||||
|
queryParam.pageSize = pageParams.value.pageSize
|
||||||
|
queryParam.pageNo = pageParams.value.pageNo
|
||||||
|
if (props.layout == 'half') {
|
||||||
|
queryParam.pageSize = -1
|
||||||
|
}
|
||||||
|
getOrgInfo(queryParam).then(res => {
|
||||||
|
orgTableList.value = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
reload()
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
orgData,
|
||||||
|
resetOrgSelectedCon,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
:deep(.ant-card-bordered) {
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-class {
|
||||||
|
:deep(.ant-card .ant-card-body) {
|
||||||
|
padding-top: 10px !important;
|
||||||
|
padding-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.con-class {
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-con-class {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-info-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.base-info-label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #595959;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-name {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #262626;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 新增的机构卡片样式 */
|
||||||
|
.org-cards-container {
|
||||||
|
max-height: 75vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-card {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
background: radial-gradient(circle at center, #c7e6ff 0%, #d4eeff 70%, #e4f0ff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-card-head) {
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
padding: 0 16px;
|
||||||
|
min-height: 48px;
|
||||||
|
|
||||||
|
.ant-card-head-title {
|
||||||
|
padding: 12px 0;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.org-container {
|
||||||
|
//background: transparent;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
.org-card {
|
||||||
|
padding: 0px;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1890ff;
|
||||||
|
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
//background: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.org-title {
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-line {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
>span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-descriptions) {
|
||||||
|
.ant-descriptions-item-label {
|
||||||
|
width: 80px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-info-content {
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 8px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #262626;
|
||||||
|
font-size: 13px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zxClass {
|
||||||
|
font-size: 12px;
|
||||||
|
background: linear-gradient(to right, #1ea0fa, #017de9);
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 25px;
|
||||||
|
color: white;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbClass {
|
||||||
|
background: #f6f6f6;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.antTitle {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis-one-lines {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-card {
|
||||||
|
border: 2px solid #1890ff;
|
||||||
|
box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,210 @@
|
||||||
|
<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-water-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 '../water.data';
|
||||||
|
import { businessListApi } from '../water.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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露给父组件的方法
|
||||||
|
defineExpose({
|
||||||
|
updateSelection,
|
||||||
|
clearSelected,
|
||||||
|
reload,
|
||||||
|
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,126 @@
|
||||||
|
<template>
|
||||||
|
<!--引用表格-->
|
||||||
|
<BasicTable @register="registerTable">
|
||||||
|
<!--插槽:table标题-->
|
||||||
|
<template #tableTitle></template>
|
||||||
|
<template #action="{ record }">
|
||||||
|
<TableAction :actions="getTableAction(record)" />
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" name="yiweilian-apiLogList" setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||||
|
import { useListPage } from '/@/hooks/system/useListPage';
|
||||||
|
import {nuFormSchema, nusColumns} from '../water.data';
|
||||||
|
import {nuSyncListApi} from '../water.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.delFlag = '0'//查正常数据
|
||||||
|
queryParam.izSync = '1'//查未同步数据
|
||||||
|
// queryParam.orgCode = props.orgCode //查对应机构数据
|
||||||
|
queryParam.column = 'nuId' //排序字段
|
||||||
|
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,143 @@
|
||||||
|
<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-water-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 '../water.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);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露给父组件的方法
|
||||||
|
defineExpose({
|
||||||
|
reload,
|
||||||
|
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,204 @@
|
||||||
|
<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-water-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 '../water.data';
|
||||||
|
import { sourceListApi } from '../water.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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露给父组件的方法
|
||||||
|
defineExpose({
|
||||||
|
updateSelection,
|
||||||
|
clearSelected,
|
||||||
|
reload,
|
||||||
|
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="asyncmain-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 '../water.data';
|
||||||
|
import { syncLogListApi } from '../water.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,549 @@
|
||||||
|
<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="5" 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="5" 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="5">
|
||||||
|
<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-water-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 './water.api';
|
||||||
|
import {selectedColumns} from './water.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()//源数据查询参数
|
||||||
|
const sourceParam = ref({viewType: 'unselected',departServerUrl:''})//源数据查询参数
|
||||||
|
const businessParam = ref({departServerUrl:''})//源数据查询参数
|
||||||
|
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 = {};
|
||||||
|
//源数据
|
||||||
|
sourceParam.value = { viewType: 'unselected',departServerUrl:org.orgCode};
|
||||||
|
//已选择
|
||||||
|
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;
|
||||||
|
sourceComRef.value.reload();
|
||||||
|
}else{
|
||||||
|
businessParam.value.address = queryParam.value.address;
|
||||||
|
businessParam.value.departId = queryParam.value.departId;
|
||||||
|
businessParam.value.nuId = queryParam.value.nuId;
|
||||||
|
businessComRef.value.reload();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchReset() {
|
||||||
|
queryParam.value = {};
|
||||||
|
if(dataType.value=='source'){
|
||||||
|
let vt = sourceParam.value.viewType;
|
||||||
|
let dsu = sourceParam.value.departServerUrl;
|
||||||
|
sourceParam.value = { viewType: vt,departServerUrl:dsu };
|
||||||
|
}else{
|
||||||
|
let dsu = businessParam.value.departServerUrl;
|
||||||
|
businessParam.value = { departServerUrl: dsu };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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){
|
||||||
|
console.log(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())
|
||||||
|
console.log(arr);
|
||||||
|
const res = await syncDevicesApi(arr);
|
||||||
|
console.log(res);
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
|
||||||
|
enum Api {
|
||||||
|
sourceList = '/iot/tq/waterMeter/sourceList',
|
||||||
|
departList = '/iot/tq/waterMeter/departList',
|
||||||
|
nuList = '/iot/tq/waterMeter/nuList',
|
||||||
|
businessList = '/iot/tq/waterMeter/businessList',
|
||||||
|
nuSyncList = '/admin/nuBaseInfo/nuBaseInfo/list',
|
||||||
|
syncDevices = '/iot/tq/waterMeter/syncDevices',
|
||||||
|
syncLogList = '/iot/tq/waterMeter/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,261 @@
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '设备状态',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'relayState',
|
||||||
|
// customRender:({record})=>{
|
||||||
|
// return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
|
||||||
|
// },
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '在线状态',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'online',
|
||||||
|
// customRender:({record})=>{
|
||||||
|
// return record.online?(record.online=='true'?'在线':'离线'):'';
|
||||||
|
// },
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '用水量m³',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'waterValue',
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
//列表数据
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '设备状态',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'relayState',
|
||||||
|
// customRender:({record})=>{
|
||||||
|
// return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
|
||||||
|
// },
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '在线状态',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'online',
|
||||||
|
// customRender:({record})=>{
|
||||||
|
// return record.online?(record.online=='true'?'在线':'离线'):'';
|
||||||
|
// },
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '用水量m³',
|
||||||
|
// align: "center",
|
||||||
|
// dataIndex: 'waterValue',
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
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: '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 },
|
||||||
|
},
|
||||||
|
];
|
||||||
Loading…
Reference in New Issue