<template>
|
<div>
|
<el-container style="height: 100%; border: 1px solid #fff">
|
<el-card style="margin-right: 10px;height: calc(100vh - 125px)">
|
<el-aside style="background-color: #fff" width="220px">
|
<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">
|
</el-tree>
|
</el-menu>
|
</el-aside>
|
</el-card>
|
<el-main style="height: calc(100vh - 125px)">
|
<el-card>
|
<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 :label="groupVal" :value="groupVal">
|
<el-tree ref="groupTree" :data="groupTreeData" :props="defaultProps" empty-text="暂无数据"
|
@node-click="handleNodeClick">
|
</el-tree>
|
</el-option>
|
</el-select>
|
|
</el-form-item>
|
</el-form>
|
<el-card style="height:calc(100vh - 635px)">
|
<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: 20px;height: height:calc(100vh - 545px)">
|
<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'
|
|
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 {
|
// 表单值
|
form: {
|
// 集团树显示值
|
groupValue: ''
|
},
|
// 检测新增按钮状态
|
disabledPush: true,
|
// 表格加载中
|
loading: false,
|
// 穿梭框数据
|
transferData: [],
|
// dialog弹窗开关
|
dialogPush: false,
|
// 属性映射表数据
|
mappingData: [],
|
// 属性映射取值表数据
|
rangeData: [],
|
// 主数据树搜索过滤
|
filterText: '',
|
// 属性映射取值表配置
|
optinoRange: {
|
title: '属性映射取值范围',
|
maxHeight: '300px',
|
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: '500px',
|
header: true,
|
rowKey: 'oid',
|
selection: false,
|
column: [
|
{label: '集团分类', prop: 'sourceClassifyName', minWidth: 80},
|
{label: '所属视图', prop: 'viewName', minWidth: 80},
|
{label: '集团属性', prop: 'sourceAttrName', minWidth: 80},
|
{label: '分类名称', prop: 'targetClassifyName', minWidth: 80},
|
{
|
label: '属性名称',
|
prop: 'targetAttrName',
|
minWidth: 80,
|
},
|
{
|
label: '默认值',
|
prop: 'defaultValue',
|
minWidth: 140,
|
cell: true,
|
blur: (value) => window.handleBlur(value, 'mapping')
|
},
|
],
|
...options
|
},
|
// 主数据分类树
|
treeData: [],
|
// 集团分类树
|
groupTreeData: [],
|
// 树popos替换值
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
id: 'oid',
|
isLeaf: ''
|
},
|
transferProps: {
|
key: 'oid',
|
label: 'name'
|
|
},
|
// 集团分类树值
|
groupVal: '',
|
// 左侧树选择的id值
|
treeParam: {},
|
// 表格选择的行
|
rangeForm: {},
|
mappingForm: {},
|
// 定时器
|
times: null,
|
|
}
|
},
|
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
|
}
|
},
|
methods: {
|
// 接口左侧树
|
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
|
// console.log(this.filtermapping)
|
}
|
},
|
// 接口获取属性映射取值范围
|
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
|
}
|
},
|
// 接口获取集团分类树
|
async referTree(oid, checked) {
|
this.groupTreeData = []
|
const response = await referTree({'conditionMap[codeclsfid]': oid, parentOid:'0'})
|
if (response.status === 200) {
|
if (checked) {
|
let items = response.data.map(item => {
|
let obj = {}
|
if (item.checked) obj = {...item}
|
else obj = null
|
return obj
|
})
|
var r = items.filter(s => {
|
return s && s.trim()
|
});
|
this.groupTreeData = r
|
} else {
|
this.groupTreeData = response.data
|
}
|
}
|
},
|
// 左侧树过滤搜索
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
// 保存按钮
|
async handleSave() {
|
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 {
|
const response = await syncClassifyModel(param)
|
if (response.status === 200) {
|
console.log(response)
|
}
|
}
|
},
|
handelTransferSave(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
|
this.dialogPush = false;
|
}
|
|
},
|
// 左侧树点击
|
handelTreeCell(event) {
|
if (event.leaf) {
|
this.treeParam.codeClassifyId = event.oid
|
this.form.groupValue = ''
|
this.groupVal = ''
|
this.tableData = []
|
this.referTree(event.oid, event.checked)
|
this.getListCodeByClassId(event.oid)
|
}
|
},
|
// 集团分类树点击
|
handleNodeClick(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();
|
},
|
// 属性取值范围单元格编辑后
|
handleMapingUpdate(row, index, done) {
|
this.$message({
|
showClose: true,
|
message: "修改成功",
|
type: "success",
|
});
|
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;
|
}
|
}
|
</style>
|
