<template>
|
<div>
|
<el-container style="height: 100%; border: 1px solid #fff">
|
<el-card :style="{ marginRight: '10px' }">
|
<el-aside width="300px" style="background-color: #fff">
|
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
</el-input>
|
<el-menu :default-openeds="['1', '3']">
|
<el-tree class="filter-tree" :data="treeData" accordion :props="defaultProps"
|
:filter-node-method="filterNode" empty-text="暂无数据" ref="tree" @node-click="handelTreeCell">
|
</el-tree>
|
</el-menu>
|
</el-aside>
|
</el-card>
|
<el-main>
|
<el-card>
|
<el-form :model="form">
|
<el-form-item label="集团分类" label-width="70px" size="small">
|
<el-select clearable ref="selectTree" v-model="form.groupValue" placeholder="请选择"
|
popper-class="popperTreeSelect">
|
<el-option :value="groupVal" :label="groupVal">
|
<el-tree ref="groupTree" :data="groupTreeData" empty-text="暂无数据" :props="defaultProps"
|
@node-click="handleNodeClick">
|
</el-tree>
|
</el-option>
|
</el-select>
|
|
</el-form-item>
|
</el-form>
|
<el-card>
|
<avue-crud :table-loading="loading" :data="mappingData" :option="optionMapping" ref="crudMapping"
|
@row-update="handleUpdate" @row-click="handleMapingRowClick">
|
<template slot="menuLeft">
|
<el-button 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">同步模型
|
</el-button>
|
</template>
|
</avue-crud>
|
</el-card>
|
<el-card :style="{ marginTop: '20px' }">
|
<avue-crud :data="rangeData" :option="optinoRange" ref="crudRange" @row-update="handleUpdate"
|
@row-dblclick="handleRowClick">
|
</avue-crud>
|
</el-card>
|
</el-card>
|
</el-main>
|
</el-container>
|
<el-dialog title="编码属性" :visible.sync="dialogPush" append-to-body="true" destroy-on-close width="30%"
|
:before-close="handleClose">
|
<el-form :model="form">
|
<el-form-item label="查询条件" label-width="70px" size="small">
|
<el-input v-model="form.name" autocomplete="off" @change="handleQuery"></el-input>
|
</el-form-item>
|
</el-form>
|
<p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
|
<transfer v-model="transferValue" :data="transferData" :filter-method="filterMethod"
|
filter-placeholder="请输入拼音全拼或者拼音缩写" @left-check-change="handelLeftCheck"></transfer>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogPush = false">取 消</el-button>
|
<el-button type="primary" @click="dialogPush = false">保 存</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import transfer from '@/components/transfer/index'
|
import pinyin from 'js-pinyin'
|
import { referCodeClassifyTree, referTree, gridAttrMapping, gridAttrRanges, batchAddSave, listCodeAttributeByClassId, syncClassifyModel } from '@/api/integration/integration.js'
|
export default {
|
components: {
|
transfer
|
},
|
data() {
|
const generateData = () => {
|
pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
|
const data = [];
|
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
|
cities.forEach((city, index) => {
|
data.push({
|
label: city,
|
key: index,
|
pinyin: pinyin.getFullChars(city),
|
pinyins: pinyin.getCamelChars(city),
|
});
|
});
|
return 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,
|
}
|
return {
|
form: {
|
name: '',
|
groupValue: ''
|
},
|
loading: false,
|
ishowTree: false,
|
search: '',
|
transferData: generateData(),
|
transferValue: [],
|
dialogPush: false,
|
mappingData: [],
|
rangeData: [],
|
filterText: '',
|
tableRowIndex: null,
|
tableColumnIndex: null,
|
optinoRange: {
|
title: '集团属性',
|
maxHeight: '300px',
|
header: false,
|
rowKey: 'oid',
|
column: [
|
{ label: '属性集团枚举值', prop: 'numTextValue', minWidth: 80 },
|
{ label: '集团属性枚举显示名称', prop: 'numText', minWidth: 80 },
|
{ label: 'MDM枚举值', prop: 'targetNumTextValue', minWidth: 80, cell: true, blur: (value) => window.handleBlur(value, 'range') },
|
{ label: 'MDM枚举显示名称', prop: 'targetNumText', minWidth: 80, cell: true, blur: (value) => window.handleBlur(value, 'range') },
|
],
|
...options
|
},
|
optionMapping: {
|
maxHeight: '500px',
|
header: true,
|
rowKey: 'oid',
|
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: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
id: 'oid',
|
isLeaf: ''
|
},
|
groupVal: '',
|
treeParam: {},
|
rangeForm: {},
|
mappingForm: {},
|
}
|
},
|
watch: {
|
filterText(val) {
|
console.log(this.$refs.tree)
|
this.$refs.tree.filter(val);
|
}
|
},
|
created() {
|
this.getReferCodeClassifyTree()
|
pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
|
},
|
mounted() {
|
window.handleBlur = this.handleBlur
|
},
|
methods: {
|
// 接口左侧树
|
async getReferCodeClassifyTree() {
|
const param = {
|
parentBtmName: "jclass",
|
valueField: "oid",
|
textField: "name",
|
parentFieldName: "id"
|
}
|
const response = await referCodeClassifyTree(param)
|
console.log(response)
|
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.loading = true
|
console.log(this.treeParam)
|
const response = await gridAttrMapping({ sourceClassifyId: oid, ...this.treeParam })
|
console.log(response)
|
if (response.status === 200) {
|
this.loading = false
|
this.mappingData = response.data.data
|
}
|
},
|
// 接口获取属性映射取值范围
|
async getGridAttrRanges(oid) {
|
this.tablesData = []
|
const response = await gridAttrRanges({ meatId: oid })
|
console.log(response)
|
if (response.status === 200) {
|
this.rangeData = response.data
|
}
|
},
|
// 接口获取主数据分类属性信息
|
async getListCodeByClassId(oid) {
|
// this.tablesData = []
|
const response = await listCodeAttributeByClassId({ codeClassifyId: oid })
|
console.log(response)
|
},
|
// 接口获取集团分类树
|
async referTree(oid, checked) {
|
this.groupTreeData = []
|
const response = await referTree({ 'conditionMap[codeclsfid]': oid, parentOid: null })
|
console.log(response)
|
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() {
|
console.log(this.mappingData)
|
// const response = await batchAddSave({ dockingPreAttrMappingVOList: this.tableData })
|
// console.log(response)
|
},
|
// 同步数据
|
async handleSync() {
|
const response = await syncClassifyModel({ dockingPreAttrMappingVOList: this.tableData })
|
console.log(response)
|
},
|
handelLeftCheck(event) {
|
console.log(event)
|
},
|
// 新增弹窗查询按钮
|
handleQuery(event) {
|
console.log(event)
|
this.form.name = event
|
},
|
filterMethod(item) {
|
return item.pinyins.indexOf(this.form.name) > -1;
|
},
|
// 左侧树点击
|
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) {
|
console.log(data)
|
this.form.groupValue = data.name
|
this.groupVal = data.name
|
this.$refs.selectTree.blur()
|
this.getGridAttrMapping(data.oid)
|
},
|
inputBlur() {
|
this.tableColumnIndex = ''
|
this.tableRowIndex = null
|
},
|
// 属性映射点击每行
|
handleCellClick(event) {
|
console.log('单击', event)
|
// this.tableRowIndex = row.index
|
// this.tableColumnIndex = column.index
|
// this.getGridAttrRanges(event.metaListId)
|
},
|
handleBlur(value, event) {
|
console.log(value)
|
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, cell, event) {
|
this.mappingForm = row
|
if (column.label === '默认值') this.$refs.crudMapping.rowCell(row, row.$index)
|
else this.getGridAttrRanges(row.metaListId)
|
|
},
|
// 属性取值范围单元格编辑
|
handleRowClick(row, column, cell, event) {
|
this.rangeForm = row
|
console.log('单击', row)
|
this.$refs.crudRange.rowCell(row, row.$index)
|
},
|
// 属性取值范围单元格编辑
|
handleUpdate(row, index, done, loading) {
|
const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId)
|
console.log(findRow)
|
this.mappingData[0].dockingPreAttrRangeVoList = [row]
|
console.log('修改后', row)
|
this.$message({
|
showClose: true,
|
message: "修改成功",
|
type: "success",
|
});
|
done();
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.text_tip {
|
padding: 10px 0;
|
color: #F56C6C;
|
}
|
|
.setstyle {
|
min-height: 200px;
|
padding: 0 !important;
|
margin: 0;
|
overflow: auto;
|
cursor: default !important;
|
}
|
|
/deep/ .el-transfer-panel__list {
|
width: 100%;
|
}
|
|
/deep/ .el-input {
|
width: auto;
|
}
|
|
/deep/ .el-transfer-panel {
|
width: 270px;
|
}
|
|
/deep/ .el-transfer-panel__list {
|
height: 370px;
|
}
|
|
/deep/ .el-transfer-panel__body {
|
height: 370px;
|
}
|
</style>
|
