<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>
|
<avue-crud :table-loading="loading" :data="tableData" :option="option" ref="crud" @cell-class-name="handelCellRow"
|
@cell-click="handleCellClick">
|
<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>
|
<template slot="defaultValue" slot-scope="{scope}">
|
<!-- <el-input v-model="scope.row.defaultValue" v-if="scope.row.index === tableRowIndex && scope.column.index === tableColumnIndex" @blur="inputBlur"> </el-input> -->
|
<span>{{ scope }}</span>
|
</template>
|
</avue-crud>
|
<el-card :style="{ marginTop: '20px' }">
|
<avue-crud :data="tablesData" :option="optinos" ref="crud"
|
@cell-click="handleCellClick">
|
</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 } 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;
|
};
|
return {
|
form: {
|
name: '',
|
groupValue: ''
|
},
|
loading: false,
|
ishowTree: false,
|
search: '',
|
transferData: generateData(),
|
transferValue: [],
|
dialogPush: false,
|
tableData: [],
|
tablesData: [
|
{
|
id:'01',
|
groupTypeName:'李四',
|
codeView:'张三',
|
sex:'',
|
typeName:''
|
}
|
],
|
filterText: '',
|
tableRowIndex:null,
|
tableColumnIndex:null,
|
optinos: {
|
title: '集团属性',
|
maxHeight: '300px',
|
menu: true,
|
delBtn: false,
|
addBtn: false,
|
index: true,
|
header: false,
|
columnBtn: false,
|
searchShow: true,
|
emptyBtn: false,
|
searchBtn: false,
|
searchShowBtn: false,
|
cellBtn: true,
|
border: true,
|
searchMenuSpan: 8,
|
column: [
|
{ label: '属性集团枚举值', prop: 'groupTypeName', minWidth: 80, },
|
{ label: '集团属性枚举显示名称', prop: 'codeView', minWidth: 80 },
|
{ label: 'MDM枚举值', prop: 'sex', minWidth: 80, cell: true },
|
{ label: 'MDM枚举显示名称', prop: 'typeName', minWidth: 80, cell: true },
|
]
|
},
|
option: {
|
maxHeight: '500px',
|
menu: true,
|
delBtn: false,
|
addBtn: false,
|
index: true,
|
header: true,
|
columnBtn: false,
|
searchShow: true,
|
emptyBtn: false,
|
searchBtn: false,
|
searchShowBtn: false,
|
cellBtn: false,
|
border: true,
|
searchMenuSpan: 8,
|
column: [
|
{ label: '集团分类', prop: 'sourceClassifyName', minWidth: 80, },
|
{ label: '所属视图', prop: 'viewName', minWidth: 80 },
|
{ label: '集团属性', prop: 'sourceAttrName', minWidth: 80 },
|
{ label: '分类名称', prop: 'targetClassifyName', minWidth: 80, overHidden: true },
|
{ label: '属性名称', prop: 'targetAttrName', minWidth: 80},
|
{ label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true },
|
]
|
},
|
treeData: [],
|
groupTreeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
id: 'oid',
|
isLeaf: ''
|
},
|
groupVal: '',
|
treeParam: {}
|
}
|
},
|
watch: {
|
filterText(val) {
|
console.log(this.$refs.tree)
|
this.$refs.tree.filter(val);
|
}
|
},
|
created() {
|
this.getReferCodeClassifyTree()
|
pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
|
console.log(pinyin.getFullChars('管理员'))
|
console.log(pinyin.getCamelChars('管理员'))
|
},
|
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 getlistCodeAttributeByClassId(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.tableData = response.data.data
|
}
|
},
|
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) {
|
console.log(value)
|
console.log(data)
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
handleSave() {
|
|
},
|
handlePush() {
|
|
},
|
handelLeftCheck(event) {
|
console.log(event)
|
},
|
handelCellRow( {row, column, rowIndex, columnIndex }) {
|
row.index = rowIndex
|
column.index = columnIndex
|
},
|
handleQuery(event) {
|
console.log(event)
|
this.form.name = event
|
},
|
filterMethod(item) {
|
return item.pinyins.indexOf(this.form.name) > -1;
|
},
|
handelTreeCell(event) {
|
console.log(event)
|
if (event.leaf) {
|
this.treeParam.codeClassifyId = event.oid
|
this.form.groupValue = ''
|
this.groupVal = ''
|
this.tableData = []
|
this.referTree(event.oid, event.checked)
|
}
|
},
|
handleNodeClick(data) {
|
console.log(data)
|
this.form.groupValue = data.name
|
this.groupVal = data.name
|
this.$refs.selectTree.blur()
|
this.getlistCodeAttributeByClassId(data.oid)
|
},
|
handleCellClick(row, column,cell, event) {
|
console.log(row)
|
console.log(column)
|
console.log(cell)
|
console.log(event)
|
this.tableRowIndex = row.index
|
this.tableColumnIndex = column.index
|
},
|
inputBlur() {
|
this.tableColumnIndex = ''
|
this.tableRowIndex = null
|
}
|
}
|
}
|
</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>
|
