<template>
|
<div>
|
<el-container style="height: 100%; border: 1px solid #fff">
|
<el-card style="margin-right: 10px;height: calc(100vh - 125px);overflow: auto">
|
<el-aside style="background-color: #fff;" width="210px">
|
<el-input v-model="filterText" placeholder="输入关键字进行过滤">
|
</el-input>
|
<el-menu :default-openeds="['1', '3']">
|
<el-tree ref="tree" :data="treeData" :filter-node-method="filterNode" :props="defaultProps"
|
accordion class="filter-tree" empty-text="暂无数据" @node-click="handelTreeCell">
|
<template slot-scope="{ node, data }" class="el-tree-node__label">
|
<el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
|
effect="dark"
|
open-delay="500"
|
placement="right-start">
|
<span style="font-size: 14px;">
|
{{ (node || {}).label }}
|
</span>
|
</el-tooltip>
|
</template>
|
</el-tree>
|
</el-menu>
|
</el-aside>
|
</el-card>
|
<el-main>
|
<el-card style="height: calc(100vh - 128px)">
|
<el-form :model="form">
|
<el-form-item label="集团分类" label-width="80px" size="small">
|
<el-select ref="selectTree" v-model="groupVal" clearable placeholder="请选择"
|
popper-class="popperTreeSelect">
|
<el-option :disabled="true" :label="groupVal" :value="groupVal">
|
<el-tree ref="groupTree"
|
:data="groupTreeData"
|
:default-checked-keys="defaultCheckedKeys"
|
:default-expanded-keys="defaultCheckedKeys"
|
:props="defaultProps"
|
empty-text="暂无数据"
|
node-key="oid"
|
show-checkbox
|
@check="handleCheck">
|
</el-tree>
|
</el-option>
|
</el-select>
|
|
</el-form-item>
|
</el-form>
|
<el-card style="height:38vh">
|
<avue-crud ref="crudMapping" :data="mappingData" :option="optionMapping" :table-loading="loading"
|
@select="setCurrentRow" @row-update="handleMapingUpdate"
|
@row-click="handleMapingClick" @row-dblclick="handleMapingRowClick"
|
@selection-change="selectionChange"
|
@select-all="handleSelectAll">
|
<template slot="menuLeft">
|
<!-- <el-button :disabled="disabledPush" icon="el-icon-plus" size="small" type="primary"-->
|
<!-- @click="dialogPush = true">新 增-->
|
<!-- </el-button>-->
|
<el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 存
|
</el-button>
|
<el-button icon="el-icon-connection" size="small" type="primary"
|
@click="handleSync('all')">同步主模型
|
</el-button>
|
<el-button icon="el-icon-connection" size="small" type="primary"
|
@click="handleSync('one')">同步详细模型
|
</el-button>
|
</template>
|
</avue-crud>
|
</el-card>
|
<el-card style="margin-top: 10px;height: 38vh">
|
<avue-crud ref="crudRange" :data="rangeData" :option="optinoRange" :style="{ marginTop: '-20px'}"
|
@row-update="handleUpdate"
|
@row-dblclick="handleRowClick">
|
</avue-crud>
|
</el-card>
|
</el-card>
|
</el-main>
|
</el-container>
|
<integration-transfer :data="transferData" :disabledData="filtermapping" :props="transferProps"
|
:visible.sync="dialogPush" @save="handelTransferSave"></integration-transfer>
|
</div>
|
</template>
|
<script>
|
import integrationTransfer from './integrationTransfer.vue'
|
import pinyin from 'js-pinyin'
|
import {
|
referCodeClassifyTree,
|
referTree,
|
gridAttrMapping,
|
gridAttrRanges,
|
batchAddSave,
|
listCodeAttributeByClassId,
|
syncClassifyModel
|
} from '@/api/integration/integration.js'
|
import {getPage} from "@/api/omd/OmdAttribute";
|
|
export default {
|
components: {
|
integrationTransfer
|
},
|
name: 'Integration',
|
data() {
|
const options = {
|
menu: false,
|
delBtn: false,
|
addBtn: false,
|
index: true,
|
columnBtn: false,
|
searchShow: true,
|
emptyBtn: false,
|
searchBtn: false,
|
searchShowBtn: false,
|
cellBtn: true,
|
border: true,
|
searchMenuSpan: 8,
|
highlightCurrentRow: true,
|
}
|
return {
|
targetNameList: [], // 元数据返回名称
|
defaultCheckedKeys: [],
|
isNodeDisabled: true,
|
// 表单值
|
form: {
|
// 集团树显示值
|
groupValue: ''
|
},
|
// 检测新增按钮状态
|
disabledPush: true,
|
// 表格加载中
|
loading: false,
|
// 穿梭框数据
|
transferData: [],
|
// dialog弹窗开关
|
dialogPush: false,
|
// 属性映射表数据
|
mappingData: [],
|
// 属性映射取值表数据
|
rangeData: [],
|
// 主数据树搜索过滤
|
filterText: '',
|
// 属性映射取值表配置
|
optinoRange: {
|
title: '属性映射取值范围',
|
maxHeight: '280px',
|
header: false,
|
rowKey: 'oid',
|
column: [
|
{label: '属性集团枚举值', prop: 'numTextValue', minWidth: 80},
|
{label: '集团属性枚举显示名称', prop: 'numText', minWidth: 80},
|
{
|
label: 'CODE枚举值',
|
prop: 'targetNumTextValue',
|
minWidth: 80,
|
cell: true,
|
blur: (value) => window.handleBlur(value, 'range')
|
},
|
{
|
label: 'CODE枚举显示名称',
|
prop: 'targetNumText',
|
minWidth: 80,
|
cell: true,
|
blur: (value) => window.handleBlur(value, 'range')
|
},
|
],
|
...options
|
},
|
// 属性映射表配置
|
optionMapping: {
|
maxHeight: '280px',
|
header: true,
|
rowKey: 'oid',
|
selection: false,
|
refreshBtn: false,
|
delBtn: false,
|
addBtn: false,
|
index: true,
|
columnBtn: false,
|
searchShow: true,
|
emptyBtn: false,
|
searchBtn: false,
|
searchShowBtn: false,
|
cellBtn: true,
|
border: true,
|
searchMenuSpan: 8,
|
highlightCurrentRow: true,
|
$cellEdit:true,
|
column: [
|
{label: '集团分类', prop: 'sourceClassifyName', minWidth: 80},
|
{label: '所属视图', prop: 'viewName', minWidth: 80},
|
{label: '集团属性', prop: 'sourceAttrName', minWidth: 80},
|
{label: '分类名称', prop: 'targetClassifyName', minWidth: 80},
|
{
|
label: '属性名称',
|
prop: 'targetAttrName',
|
type: 'select',
|
cell: true,
|
allowCreate: true,
|
filterable: true,
|
minWidth: 80,
|
props:{
|
label:'targetAttrName',
|
value:'targetAttrName'
|
},
|
dicData: this.targetNameList,
|
},
|
// {
|
// label: '默认值',
|
// prop: 'defaultValue',
|
// minWidth: 140,
|
// cell: true,
|
// blur: (value) => window.handleBlur(value, 'mapping')
|
// },
|
],
|
},
|
// 主数据分类树
|
treeData: [],
|
// 集团分类树
|
groupTreeData: [],
|
// 树prpos替换值
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
id: 'oid',
|
isLeaf: '',
|
// disabled:()=>{
|
// return true
|
// }
|
},
|
transferProps: {
|
key: 'oid',
|
label: 'name'
|
|
},
|
// 集团分类树值
|
groupVal: '',
|
// 左侧树选择的id值
|
treeParam: {},
|
// 表格选择的行
|
rangeForm: {},
|
mappingForm: {},
|
// 定时器
|
times: null,
|
TreeSelectOid: ""
|
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
}
|
},
|
created() {
|
this.getReferCodeClassifyTree()
|
pinyin.setOptions({checkPolyphone: false, charCase: 1});
|
},
|
mounted() {
|
let that = this
|
window.handleBlur = that.handleBlur
|
},
|
computed: {
|
filtermapping() {
|
const data = this.mappingData.filter(item => {
|
return !(Object.prototype.hasOwnProperty.call(item, 'targetAttrName') && (item.targetAttrName === null || item.targetAttrName === undefined || item.targetAttrName === ""))
|
})
|
const transfer = data.map(obj => {
|
return obj.targetAttrName
|
})
|
return transfer
|
},
|
targetColumn() {
|
return this.optionMapping.column.find(column => column.prop === 'targetAttrName');
|
}
|
},
|
methods: {
|
getTargetName(data) {
|
this.targetColumn.dicData = data.filter(item => item.name && item.name.trim() !== "") // 过滤掉name为空的属性
|
.map(item => {
|
return {
|
targetAttrId: item.oid,
|
targetAttrKey: item.id,
|
targetAttrName: item.name,
|
disabled:false
|
}
|
});
|
},
|
// 接口左侧树
|
async getReferCodeClassifyTree() {
|
this.treeData = []
|
const param = {
|
parentBtmName: "jclass",
|
valueField: "oid",
|
textField: "name",
|
parentFieldName: "id"
|
}
|
const response = await referCodeClassifyTree(param)
|
if (response.status === 200) {
|
let data = response.data;
|
this.treeData = data.map(item => item.children ? {...item, ...{isLeaf: false}} : {...item, ...{isLeaf: true}})
|
}
|
},
|
// 接口获取属性映射
|
async getGridAttrMapping(oid) {
|
this.mappingData = []
|
this.loading = true
|
const response = await gridAttrMapping({sourceClassifyId: oid, ...this.treeParam})
|
if (response.status === 200) {
|
this.loading = false
|
this.mappingData = response.data.data
|
|
for (const item of this.mappingData){
|
if(item.targetAttrName && item.targetAttrId && item.targetAttrKey){
|
const targetObject = this.targetColumn.dicData.find(obj => obj.targetAttrName === item.targetAttrName);
|
targetObject.disabled = true;
|
}
|
}
|
}
|
},
|
// 接口获取属性映射取值范围
|
async getGridAttrRanges(oid) {
|
this.rangeData = []
|
const response = await gridAttrRanges({meatId: oid})
|
if (response.status === 200) {
|
// console.log(response.data)
|
this.rangeData = response.data.data
|
}
|
},
|
// 接口获取主数据分类属性信息
|
async getListCodeByClassId(oid) {
|
this.transferData = []
|
pinyin.setOptions({checkPolyphone: false, charCase: 1});
|
const response = await listCodeAttributeByClassId({codeClassifyId: oid})
|
if (response.status === 200) {
|
const data = response.data.data
|
this.transferData = data;
|
this.getTargetName(data)
|
// console.log(data)
|
}
|
},
|
// 接口获取集团分类树
|
async referTree(oid) {
|
this.groupTreeData = [];
|
const response = await referTree({'conditionMap[codeclsfid]': oid, parentOid: '0'});
|
if (response.status === 200) {
|
this.groupTreeData = response.data; // 将获取到的数据赋值给集团分类树数据
|
|
await this.filterCheckedNodes(this.groupTreeData, this.defaultCheckedKeys);
|
await this.$nextTick(() => {
|
this.$refs.groupTree.setCheckedKeys(this.defaultCheckedKeys);
|
});
|
|
this.handlerTreeData(this.groupTreeData);
|
|
this.defaultCheckedKeys = [];
|
}
|
},
|
// 过滤出来checked为true的节点
|
filterCheckedNodes(data, checkedNodes) {
|
data.forEach(node => {
|
if (node.checked) {
|
checkedNodes.push(node.oid);
|
this.getGridAttrMapping(node.oid);
|
this.form.groupValue = node.oid;
|
this.groupVal = node.name;
|
}
|
|
if (node.children && node.children.length > 0) {
|
this.filterCheckedNodes(node.children, checkedNodes);
|
}
|
});
|
},
|
// 过滤处理每个节点
|
handlerTreeNode(node) {
|
// 根据节点禁用状态设置节点是否禁用
|
this.$set(node, 'disabled', !node.checked);
|
if (node.children && node.children.length > 0) {
|
// 递归循环处理所有子节点
|
node.children.forEach(child => this.handlerTreeNode(child));
|
}
|
},
|
// 检查所有节点是否都是未禁用状态
|
allNodeChecked(data) {
|
for (const node of data) {
|
// 如果存在禁用节点返回false
|
if (node.checked) {
|
return false;
|
}
|
// 如果存在子节点且子节点存在禁用节点，则返回false
|
if (node.children && !this.allNodeChecked(node.children)) {
|
return false;
|
}
|
}
|
// 没有禁用节点返回true
|
return true;
|
},
|
// 集团分类树禁用数据处理整合方法
|
handlerTreeData(data) {
|
if (this.allNodeChecked(data)) {
|
// 如果所有节点都未禁用将所有节点设置为false
|
data.forEach(node => {
|
this.$set(node, 'disabled', false); // Vue 3 中可能不需要这样做
|
});
|
return;
|
}
|
// 查找禁用节点
|
let checkedNode = data.find(node => node.checked);
|
data.forEach(node => {
|
// 如果节点不是禁用节点设置为true
|
this.$set(node, 'disabled', node !== checkedNode);
|
if (node.children && node.children.length > 0) {
|
// 调用循环节点
|
this.handlerTreeNode(node);
|
}
|
});
|
},
|
// 左侧树过滤搜索
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
// 保存按钮
|
async handleSave() {
|
const getTargetCorresponding = (row) =>{
|
return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName);
|
}
|
for (const item of this.mappingData) {
|
item.$cellEdit = false;
|
if(item.targetAttrName){
|
const { targetAttrId, targetAttrKey, targetAttrName } = await getTargetCorresponding(item);
|
Object.assign(item, { targetAttrId, targetAttrKey, targetAttrName });
|
}
|
}
|
const response = await batchAddSave({dockingPreAttrMappingVOList: this.mappingData})
|
if (response.status === 200) {
|
this.$message({
|
type: "success",
|
message: "保存成功!"
|
});
|
}
|
},
|
// 同步数据
|
async handleSync(type = 'all') {
|
let param = {operationType: type}
|
if (type === 'one') {
|
param.classifyId = this.form.groupValue
|
}
|
if (this.form.groupValue === '' && type === 'one') {
|
this.$message({
|
type: "error",
|
message: "请选择一条集团分类"
|
});
|
} else {
|
try {
|
const response = await syncClassifyModel(param);
|
if (response.status === 200) {
|
this.$message.success(response.data.msg)
|
}
|
} catch (error) {
|
console.error(error);
|
}
|
}
|
},
|
handelTransferSave(event) {
|
// console.log(event)
|
let that = this
|
const transferValue = event.value
|
if (Object.keys(that.mappingForm).length == 0) {
|
this.$message({
|
type: "error",
|
message: "请选择一条数据!"
|
});
|
} else {
|
const findRow = that.mappingData.findIndex(item => item.metaListId === that.mappingForm.metaListId)
|
that.mappingData[findRow].targetAttrName = transferValue[0].name;
|
that.mappingData[findRow].targetAttrId = transferValue[0].oid;
|
that.mappingData[findRow].targetAttrKey = transferValue[0].id;
|
this.dialogPush = false;
|
}
|
|
},
|
// 左侧树点击
|
handelTreeCell(event) {
|
this.treeParam.codeClassifyId = event.oid
|
this.form.groupValue = ''
|
this.groupVal = ''
|
this.tableData = []
|
this.mappingData = []
|
this.referTree(event.oid)
|
this.getListCodeByClassId(event.oid)
|
},
|
// 集团分类树选择
|
handleCheck(data) {
|
this.form.groupValue = data.oid
|
this.groupVal = data.name
|
this.$refs.selectTree.blur()
|
this.getGridAttrMapping(data.oid)
|
},
|
// 集团分类失去焦点
|
inputBlur() {
|
this.tableColumnIndex = ''
|
this.tableRowIndex = null
|
},
|
// 失去焦点
|
handleBlur(value, event) {
|
if (event === 'range') this.$refs.crudRange.rowCell(this.rangeForm, this.rangeForm.$index)
|
if (event === 'mapping') this.$refs.crudMapping.rowCell(this.mappingForm, this.mappingForm.$index)
|
},
|
// 集团映射属性行选择单元格编辑（双击）
|
handleMapingRowClick(row, column) {
|
clearTimeout(this.times)
|
this.mappingForm = row
|
if (column.label === '默认值' || column.label === '属性名称') this.$refs.crudMapping.rowCell(row, row.$index)
|
},
|
// 集团映射属性行选择（单击）
|
handleMapingClick(row) {
|
clearTimeout(this.times)
|
this.mappingForm = row
|
this.times = setTimeout(() => {
|
this.$refs.crudMapping.toggleSelection([row]);
|
}, 300)
|
},
|
// 属性取值范围单元格编辑（双击）
|
handleRowClick(row) {
|
this.rangeForm = row
|
this.$refs.crudRange.rowCell(row, row.$index)
|
},
|
// 属性取值范围单元格编辑后
|
handleUpdate(row, index, done) {
|
const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId)
|
this.rangeData[index] = row
|
this.mappingData[findRow].dockingPreAttrRangeVoList = (this.rangeData)
|
this.$message({
|
showClose: true,
|
message: "修改成功",
|
type: "success",
|
});
|
done();
|
},
|
// 属性取值范围单元格编辑后
|
async handleMapingUpdate(row, index, done) {
|
const getTargetCorresponding = async (row) => {
|
return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName);
|
};
|
|
try {
|
if (!row.targetAttrName) {
|
this.$message.warning('请选择要保存的属性名称！');
|
done();
|
return;
|
}
|
|
// 获取目标属性信息
|
const { targetAttrId, targetAttrKey, targetAttrName } = await getTargetCorresponding(row);
|
|
// 更新行数据
|
Object.assign(row, { targetAttrId, targetAttrKey, targetAttrName });
|
|
const response = await batchAddSave({ dockingPreAttrMappingVOList: this.mappingData });
|
|
if (response.status === 200) {
|
this.$message({
|
type: "success",
|
message: "修改成功!"
|
});
|
}
|
} catch (error) {
|
console.error('处理映射更新时出错：', error);
|
} finally {
|
done();
|
}
|
},
|
// 集团映射属性选择（单选）
|
selectionChange(selection) {
|
if (selection.length > 1) {
|
const nowVal = selection.shift();
|
this.$refs.crudMapping.toggleRowSelection(nowVal, false);
|
} else if (selection.length === 1) {
|
// 对单选数据的操作写在这里
|
this.disabledPush = false
|
this.getGridAttrRanges(this.mappingForm.metaListId)
|
}
|
},
|
setCurrentRow(selection, row) {
|
this.mappingForm = row
|
this.disabledPush = false
|
},
|
handleSelectAll(selection) {
|
this.$refs.crudMapping.toggleSelection()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.setstyle {
|
min-height: 200px;
|
padding: 0 !important;
|
margin: 0;
|
overflow: auto;
|
cursor: default !important;
|
}
|
|
::v-deep {
|
.el-transfer-panel__list {
|
width: 100%;
|
height: 370px;
|
}
|
|
.el-transfer-panel__body {
|
height: 370px;
|
}
|
|
.el-input {
|
width: auto;
|
}
|
|
.el-transfer-panel {
|
width: 270px;
|
}
|
.el-scrollbar__view {
|
height: 100px ;
|
}
|
}
|
|
</style>
|
