<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-05-14 16:22:28
|
* @FilePath: /smart-web/src/views/master/person/main/index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<div class="left-title">业务列表</div>
|
<el-tree :data="tableData" node-key="id" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" default-expand-all :highlight-current="true" :expand-on-click-node="false"/>
|
</div>
|
<div class="aposcope-right">
|
<div class="right-content">
|
<div class="content-title"><span>*</span>所在物理表</div>
|
<el-select v-model="metaForm.tableName" :disabled="isDis">
|
<el-option v-for="item in tableNameList" :key="item.tableName" :label="item.tableName" :value="item.tableName"/>
|
</el-select>
|
</div>
|
<div class="right-content">
|
<div class="content-title"><span>*</span>字段1</div>
|
<el-select v-model="metaForm.refCode" :disabled="isDis">
|
<el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
|
</el-select>
|
</div>
|
<div class="right-content">
|
<div class="content-title"><span>*</span>字段2</div>
|
<el-select v-model="metaForm.refName" :disabled="isDis">
|
<el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
|
</el-select>
|
</div>
|
<div class="right-content">
|
<div class="content-title">编码字段</div>
|
<el-select v-model="metaForm.code">
|
<el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
|
</el-select>
|
</div>
|
<div class="right-content">
|
<div class="content-title">参数设置</div>
|
<el-button type="primary" @click="addParameter" :disabled="isAdd">添加参数</el-button>
|
</div>
|
<el-table ref="searchDataListRef" :data="searchDataList" border style="width: 100%;margin-top: 20px;" class="multipleTableRef">
|
<el-table-column prop="fcode" label="字段编码">
|
<template #default="scope">
|
<div v-if="scope.row.isEdit">
|
<span class="important-star">*</span>
|
<el-select v-model="tableForm.fcode" style="width: 90%;">
|
<el-option v-for="item in refCodeList" :key="item.columnName" :label="item.columnName" :value="item.columnName"/>
|
</el-select>
|
</div>
|
<div v-else>{{scope.row.fcode}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="fname" label="字段标题">
|
<template #default="scope">
|
<div v-if="scope.row.isEdit">
|
<span class="important-star">*</span>
|
<el-input v-model="tableForm.fname" style="width: 90%;"></el-input>
|
</div>
|
<div v-else>{{scope.row.fname}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="field" label="实体属性">
|
<template #default="scope">
|
<div v-if="scope.row.isEdit">
|
<span class="important-star">*</span>
|
<el-input v-model="tableForm.field" style="width: 90%;"></el-input>
|
</div>
|
<div v-else>{{scope.row.field}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="elementType" label="元素类型">
|
<template #default="scope">
|
<div v-if="scope.row.isEdit">
|
<span class="important-star">*</span>
|
<el-select v-model="tableForm.elementType" @change="elementTypeNameChange" style="width: 90%;">
|
<el-option v-for="item in dictionaryType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
|
</el-select>
|
</div>
|
<div v-else>{{scope.row.elementTypeName}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="enumType" label="枚举类型">
|
<template #default="scope">
|
<el-select v-if="scope.row.isEdit" v-model="tableForm.enumType" :disabled="tableForm.elementType!='4'" @change = enumTypeChange>
|
<el-option v-for="item in dictList" :key="item.id" :label="item.code" :value="item.id"/>
|
</el-select>
|
<div v-else>{{scope.row.enumTypeZn}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="seq" label="字段顺序">
|
<template #default="scope">
|
<el-input-number v-if="scope.row.isEdit" scope.row.isEdit v-model="tableForm.seq" :min="0" :max="99" style="width:100%;"/>
|
<div v-else>{{scope.row.seq}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="refObjectTypeId" label="引用关系">
|
<template #default="scope">
|
<el-tree-select v-if="scope.row.isEdit" node-key="id" :props="defalutProps" v-model="tableForm.refObjectTypeId" :data="tableData" :render-after-expand="false" :disabled="tableForm.elementType!='5'" @node-click="handleNodeClick1"/>
|
<div v-else>{{scope.row.refObjectTypeIdZn}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template #default="scope">
|
<div v-if="scope.row.isEdit">
|
<el-button size="small" type="primary" @click="comfirmTable">确定</el-button>
|
<el-button size="small" @click="cancelTable">取消</el-button>
|
</div>
|
<div v-else>
|
<!-- <el-icon class="operationIcon" @click="editTable(scope.$index)"><Edit /></el-icon> -->
|
<el-icon class="operationIcon" @click="deleteTable(scope.$index)"><Delete /></el-icon>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="saveBtn">
|
<el-button type="primary" @click="saveBtn" :disabled="isAdd">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
name: "metaObject",
|
data(){
|
return {
|
dictList: [], //枚举类型
|
elementTypeValue: "",
|
detailobj: {},
|
testList: [],
|
tableForm: {
|
fcode: "",
|
fname: "",
|
field: "",
|
elementType: "",
|
enumType: "",
|
seq: 0,
|
refObjectTypeId: ""
|
},
|
inputValue: "",
|
isAdd: false,
|
isDis: true,
|
tableNameList: [],
|
refCodeList: [],
|
metaForm: {
|
tableName: "",
|
refCode: "",
|
refName: "",
|
code: ""
|
},
|
classificationRules: {
|
classify: [
|
{ required: true, message: "请选择分类字段" }
|
]
|
},
|
classificationForm: {
|
classify: "",
|
dictionary: ""
|
},
|
isSaveing: false,
|
searchDataList: [], //右侧数据list
|
defalutProps: {
|
label: 'dictValue',
|
children: 'children',
|
isLeaf: 'hasChildren'
|
},
|
tableData: [],
|
firstChild: [], //一级菜单
|
dictKey: "",
|
dictionaryType: [] //字典类型
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.getDictionary(); //字典类型
|
this.getDict(); //枚举类型
|
},
|
components: {
|
...ElementPlusIconsVue
|
},
|
methods: {
|
getDict() { //枚举类型
|
this.$HTTP.get("/api/blade-system/dict/list").then(res=> { //物理表
|
if(res.code == 200) {
|
this.dictList = res.data;
|
}
|
})
|
},
|
editTable(index) {
|
this.isAdd = true;
|
var obj = Object.assign({},this.searchDataList[index],{isEdit: true});
|
this.searchDataList.splice(index,1,obj);
|
},
|
deleteTable(index) {
|
this.searchDataList.splice(index,1);
|
},
|
enumTypeChange(val) { //枚举类型
|
this.dictList.forEach(item=> {
|
if(item.id == val) {
|
this.tableForm.enumTypeZn = item.code;
|
}
|
})
|
},
|
elementTypeNameChange(val) { //元素类型
|
this.dictionaryType.forEach(item=> {
|
if(item.dictKey == val) {
|
this.elementTypeValue = item.dictValue;
|
}
|
})
|
this.tableForm.enumType = "";
|
this.tableForm.refObjectTypeId = "";
|
},
|
saveBtn() {
|
var obj = Object.assign(this.detailobj,this.metaForm); //detailobj物理数据，metaForm基础数据
|
obj.fields = this.searchDataList;
|
this.$HTTP.post("/api/blade-system/meta-object-type/submit",obj).then(res=> {
|
if(res.code == 200) {
|
this.$message.success("保存成功");
|
}
|
})
|
},
|
comfirmTable() {
|
this.cancelTable();
|
this.tableForm.refObjectTypeIdZn = this.tableForm.dictKey;
|
this.tableForm.elementTypeName = this.elementTypeValue;
|
this.tableForm.enumType = this.tableForm.enumTypeZn;
|
this.tableForm.id = null;
|
this.tableForm.objectId = this.detailobj.objectId;
|
this.searchDataList.unshift(this.tableForm);
|
},
|
cancelTable() {
|
this.searchDataList.splice(0,1);
|
this.isAdd = false;
|
},
|
addParameter() {
|
this.tableForm = {
|
fcode: "",
|
fname: "",
|
field: "",
|
elementType: "",
|
enumType: "",
|
seq: 0,
|
refObjectTypeId: ""
|
}
|
this.isAdd = true;
|
var obj = Object.assign({},this.tableForm,{isEdit: true})
|
obj.id = null;
|
this.searchDataList.unshift(obj);
|
},
|
getDictionary() { //字典类型
|
this.$HTTP.get("/api/blade-system/dict/dictionary?code=element_type").then(res=> { //物理表
|
if(res.code == 200) {
|
this.dictionaryType = res.data;
|
this.getMenuList();
|
}
|
})
|
},
|
getList() {
|
this.$HTTP.get(`/api/blade-system/bascoderule/count?type=${this.dictKey}`).then(res=> { //是否可选
|
if(res.code == 200) {
|
if(res.data == 1) {
|
this.isDis = true;
|
}else {
|
this.isDis = false;
|
}
|
}
|
})
|
this.$HTTP.get("/api/blade-system/meta-object-type/tableDetail").then(res=> { //物理表
|
if(res.code == 200) {
|
this.tableNameList = res.data;
|
this.gettableName(); //获取字段
|
}
|
})
|
this.getSearchDataList(); //表格数据
|
},
|
gettableName() {
|
this.$HTTP.get(`/api/blade-system/meta-object-type/detail?fId=${this.dictKey}`).then(res=> { //物理表数据
|
if(res.code == 200) {
|
this.tableNameList.forEach(item=> {
|
if(res.data.tableName == item.tableName) {
|
this.refCodeList = item.tableColumns;
|
}
|
})
|
this.metaForm.tableName = res.data.tableName;
|
this.metaForm.refCode = res.data.refCode;
|
this.metaForm.refName = res.data.refName;
|
this.metaForm.code = res.data.code;
|
this.detailobj = res.data;
|
this.detailobj.objectId = res.data.fid;
|
}
|
})
|
},
|
getSearchDataList() {
|
this.$HTTP.get(`/api/blade-system/meta-object-type-field/list?objectId=${this.dictKey}`).then(res=> { //表格数据
|
if(res.code == 200) {
|
this.searchDataList = res.data;
|
res.data.forEach(item=> {
|
item.enumTypeZn = item.enumType; //枚举类型
|
item.refObjectTypeIdZn = item.refObjectTypeId; //引用关系
|
})
|
this.dictionaryType.forEach(item=> { //元素类型
|
this.searchDataList.forEach(item1=> {
|
if(item1.elementType == item.dictKey) {
|
item1.elementTypeName = item.dictValue;
|
}
|
})
|
})
|
}
|
})
|
},
|
closeVisible(flag) {
|
if(flag == "closed") {
|
this.classificationForm = {
|
classify: "",
|
dictionary: ""
|
}
|
this.$refs.dialogForm.resetFields();
|
};
|
},
|
handleNodeClick1(data) {
|
if(this.firstChild.includes(data.id)) { //一级菜单返回
|
this.$nextTick(()=> {
|
this.tableForm.refObjectTypeId = "";
|
})
|
return;
|
};
|
this.tableForm.refObjectTypeIdZn = data.dictValue;
|
this.tableForm.dictKey = data.dictKey;
|
},
|
handleNodeClick(data) {
|
if(!this.firstChild.includes(data.id)) {
|
this.dictKey = data.dictKey;
|
this.getList(); //所在物理表、是否可选
|
this.isAdd = false;
|
}
|
// this.drawerPath = data.name;
|
// this.$HTTP.get("/api/blade-system/api-scope/list",this.searchData).then(res=> {
|
// if(res.code == 200) {
|
// this.searchDataList = res.data.records;
|
// }
|
// })
|
},
|
extractLastLevelIds(array) { //递归获取children最后一级的id的数组
|
let ids = [];
|
for (let i = 0; i < array.length; i++) {
|
const obj = array[i];
|
if (obj.children) {
|
// 递归调用以提取更深层级的children中的id
|
ids = ids.concat(this.extractLastLevelIds(obj.children));
|
} else {
|
// 如果没有children属性，则假定当前对象是最后一级
|
if (obj.id) {
|
ids.push(obj);
|
}
|
}
|
}
|
return ids;
|
},
|
getMenuList() {
|
this.$HTTP.get("/api/blade-system/dict/dictionary-tree?code=code_rule_for_biz_objects").then(res=> {
|
if(res.code == 200) {
|
this.tableData = res.data;
|
var menuGrantList = res.data.filter(item=> { //过滤掉没有children的
|
return item.children;
|
});
|
var lastId = this.extractLastLevelIds(menuGrantList[0].children); //获取最后一级id
|
this.firstChild = res.data.map(item=> {
|
return item.id;
|
})
|
this.$nextTick(()=> {
|
this.dictKey = lastId[0].dictKey;
|
this.$refs.treeRef.setCurrentKey(lastId[0].id); //设置选中数据
|
this.getList(); //所在物理表、是否可选
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
margin-bottom: 12px;
|
}
|
.right-content {
|
margin-bottom: 12px;
|
}
|
.content-title {
|
margin-bottom: 12px;
|
}
|
.content-title span {
|
margin-right: 4px;
|
color: red;
|
}
|
.operationIcon {
|
font-size: 16px;
|
margin-right:4px;
|
cursor: pointer;
|
}
|
.saveBtn {
|
margin-top: 20px;
|
text-align: right;
|
}
|
.important-star {
|
margin-right: 4px;
|
color: red;
|
}
|
</style>
|
