|
@@ -9,7 +9,7 @@
|
|
|
<el-card shadow="always">
|
|
|
<DynamicForm ref="dynamicForm" :formItems="treeFormItems" :formButtons="mode != 4 ? treeFormButtons : []"
|
|
|
:Showbuttons="mode != 4" @cancelTree="cancelTree" @confirmTree="confirmTree"
|
|
|
- @query-params-change="handleQueryParamsChange">
|
|
|
+>
|
|
|
</DynamicForm>
|
|
|
</el-card>
|
|
|
</div>
|
|
@@ -17,8 +17,6 @@
|
|
|
<div class="tree_table_mange_tabulation_title">
|
|
|
<span>表格字段配置</span>
|
|
|
<el-card shadow="always" v-loading="loading">
|
|
|
- <!-- 表格配置 -->
|
|
|
- <!-- @query-params-change="handleQueryParamsChange" -->
|
|
|
<DynamicForm ref="treeTableFormItems" :formItems="treeTableFormItems" :Showbuttons="false"
|
|
|
@query-params-change="handleQueryParamsTableChange">
|
|
|
</DynamicForm>
|
|
@@ -63,6 +61,7 @@ export default {
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ treeSelect:true,
|
|
|
// 标记,2增加3修改4查看
|
|
|
mode: 4,
|
|
|
//id查询的数组
|
|
@@ -158,16 +157,16 @@ export default {
|
|
|
]
|
|
|
},
|
|
|
{//treeTableConditionColumn
|
|
|
- label: '匹配名',
|
|
|
+ label: '匹配模式',
|
|
|
prop: 'treeTableCondition',
|
|
|
component: 'el-select',
|
|
|
attrs: {
|
|
|
- placeholder: '请选择匹配名',
|
|
|
+ placeholder: '请选择匹配模式',
|
|
|
clearable: true,
|
|
|
},
|
|
|
options: [{
|
|
|
- label: '根据id关联',
|
|
|
- value: 'id'
|
|
|
+ label: '根据value关联',
|
|
|
+ value: 'value'
|
|
|
},
|
|
|
{
|
|
|
label: '根据label关联',
|
|
@@ -175,7 +174,7 @@ export default {
|
|
|
}],
|
|
|
selectSlot: true,
|
|
|
rules: [
|
|
|
- { required: true, message: '匹配名不能为空', trigger: 'blur' }
|
|
|
+ { required: true, message: '匹配模式不能为空', trigger: 'blur' }
|
|
|
]
|
|
|
},
|
|
|
{//treeRecursiveValue
|
|
@@ -219,10 +218,28 @@ export default {
|
|
|
},
|
|
|
options: [],
|
|
|
selectSlot: true,
|
|
|
+ listeners: {
|
|
|
+ change: this.handleTableChangeTree, // 监听 change 事件
|
|
|
+ // focus: this.treeSelectFocus, // 监听 focus 事件
|
|
|
+ },
|
|
|
rules: [
|
|
|
{ required: true, message: '关联表格不能为空', trigger: 'blur' }
|
|
|
],
|
|
|
},
|
|
|
+ {//treeTableJoinTablecondition
|
|
|
+ label: '关联字段',
|
|
|
+ prop: 'treeTableJoinTableCondition',
|
|
|
+ component: 'el-select',
|
|
|
+ attrs: {
|
|
|
+ placeholder: '请选择表格关联字段',
|
|
|
+ clearable: true,
|
|
|
+ },
|
|
|
+ options: [],
|
|
|
+ selectSlot: true,
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '关联字段不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
],
|
|
|
//树形表单按钮配置
|
|
|
treeFormButtons: [
|
|
@@ -380,6 +397,7 @@ export default {
|
|
|
let data = {}
|
|
|
let judgmentMenuResult = await this.judgmentMenu(this.mode);
|
|
|
if (judgmentMenuResult.code == 200) {
|
|
|
+ console.log('this.tableList[1]',this.tableList)
|
|
|
data = {
|
|
|
menuId: judgmentMenuResult.data,//菜单id
|
|
|
menuName: formTopData.menuName,//菜单名称
|
|
@@ -387,10 +405,11 @@ export default {
|
|
|
treeTableName: formTopData.treeTableName,//树形绑定的表名
|
|
|
treeTablePrimaryKey: formTopData.treeTablePrimaryKey,//树形表主键
|
|
|
treeTableDgl: formTopData.treeTableDgl,//树形表后台递归列
|
|
|
- treeShowLabel: fromTopData.treeShowLabel,// 树形展示列
|
|
|
+ treeShowLabel: formTopData.treeShowLabel,// 树形展示列
|
|
|
treeTableCondition: formTopData.treeTableCondition,//树形表是lable/还是value作为条件
|
|
|
tableId: x.tableId,//关联表
|
|
|
tableNameDes: this.tableList[0].dtName,//关联表
|
|
|
+ treeTableJoinTableCondition:x.treeTableJoinTableCondition,
|
|
|
treeTableJoinTable: this.tableList[0].dtTableName,//关联表表名
|
|
|
treeTableKey: this.treeTableKey// 树形菜单的treeTableKey
|
|
|
}
|
|
@@ -415,10 +434,10 @@ export default {
|
|
|
treeTablePrimaryKey: formTopData.treeTablePrimaryKey,//树形表主键
|
|
|
treeTableDgl: formTopData.treeTableDgl,//树形表后台递归列
|
|
|
treeShowLabel: formTopData.treeShowLabel,//树形表展示列
|
|
|
-
|
|
|
treeTableCondition: formTopData.treeTableCondition,//树形表是lable/还是value作为条件
|
|
|
tableId: x.tableId,//关联表
|
|
|
tableNameDes: this.tableList[0].dtName,//关联表
|
|
|
+ treeTableJoinTableCondition:x.treeTableJoinTableCondition,
|
|
|
treeTableJoinTable: this.tableList[0].dtTableName,//关联表表名
|
|
|
treeTableKey: this.treeTableKey// 树形菜单的treeTableKey
|
|
|
}
|
|
@@ -452,10 +471,10 @@ export default {
|
|
|
if (mode == 2) {
|
|
|
let tableId = this.$refs.treeTableFormItems.queryParams['tableId']
|
|
|
let addTableKey;
|
|
|
- if(tableId){//0314-cs
|
|
|
+ if (tableId) {//0314-cs
|
|
|
let res = await getTableInfo(tableId);
|
|
|
- console.log('[res0314----]',res)
|
|
|
- addTableKey = res.data.tableKey
|
|
|
+ console.log('[res0314----]', res)
|
|
|
+ addTableKey = res.data.tableKey
|
|
|
}
|
|
|
let menuName = this.$refs.dynamicForm.queryParams['menuName']
|
|
|
let parentId = this.$refs.dynamicForm.queryParams['menuId']
|
|
@@ -589,14 +608,16 @@ export default {
|
|
|
},
|
|
|
// 关联表选择后触发的事件
|
|
|
handleTableChange(value) {
|
|
|
+ console.log('handleTableChange---value', value)
|
|
|
// 1. 清除 treeTablePrimaryKey treeTableDgl
|
|
|
this.$refs.dynamicForm.queryParams.treeTablePrimaryKey = null; // 或者设置为空数组 []
|
|
|
this.$refs.dynamicForm.queryParams.treeTableDgl = null; // 或者设置为空数组 []
|
|
|
this.$refs.dynamicForm.queryParams.treeShowLabel = null; // 或者设置为空数组 []
|
|
|
-
|
|
|
+
|
|
|
// 清空 treeTablePrimaryKey 的 options(可选,如果需要清空选项)
|
|
|
this.treeFormItems[5].options = [];
|
|
|
this.treeFormItems[7].options = [];
|
|
|
+ this.treeFormItems[8].options = [];
|
|
|
let data = {
|
|
|
databaseName: this.databaseName,
|
|
|
databaseType: this.databaseType,
|
|
@@ -618,46 +639,78 @@ export default {
|
|
|
value: item.fieldName,
|
|
|
}
|
|
|
})
|
|
|
+ this.treeFormItems[8].options = res.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.fieldDescription,
|
|
|
+ value: item.fieldName,
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
}).catch(() => {
|
|
|
// 清空 treeTablePrimaryKey treeTableDgl 的值
|
|
|
this.$refs.dynamicForm.queryParams.treeTablePrimaryKey = null; // 或者设置为空数组 []
|
|
|
this.$refs.dynamicForm.queryParams.treeTableDgl = null; // 或者设置为空数组 []
|
|
|
this.$refs.dynamicForm.queryParams.treeShowLabel = null; // 或者设置为空数组 []
|
|
|
-
|
|
|
+
|
|
|
// 清空 treeTablePrimaryKey 的 options(可选,如果需要清空选项)
|
|
|
this.treeFormItems[5].options = [];
|
|
|
this.treeFormItems[7].options = [];
|
|
|
-
|
|
|
+ this.treeFormItems[8].options = [];
|
|
|
});
|
|
|
},
|
|
|
- // 监听表单值发生变化queryParams
|
|
|
- handleQueryParamsChange(newParams) {
|
|
|
- // console.log('queryParams 发生变化:', newParams);
|
|
|
+ handleTableChangeTree(value) {
|
|
|
+ this.treeTableFormItems[1].options = []
|
|
|
+ this.$refs.treeTableFormItems.queryParams.treeTableJoinTableCondition = null; // 或者设置为空数组 []
|
|
|
+ let data = this.treeTableFormItems[0].options.filter(item => item.tId == value)[0]
|
|
|
+ console.log('[[data-----]]',data)
|
|
|
+
|
|
|
+ if (data?.spare) {
|
|
|
+ let spare = JSON.parse(JSON.parse(JSON.stringify(data.spare)))
|
|
|
+ if (Array.isArray(spare)) {
|
|
|
+ this.treeTableFormItems[1].options = spare.map(item => {
|
|
|
+ return {
|
|
|
+ value: item.fieldName, // 使用 fieldName 作为 value
|
|
|
+ label: item.fieldDescription.trim() // 使用 fieldDescription 作为显示文本,并去掉可能存在的多余空白字符
|
|
|
+ };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error('Expected an array for spare but got:', typeof spare);
|
|
|
+ this.treeTableFormItems[1].options = []
|
|
|
+ this.$refs.treeTableFormItems.queryParams.treeTableJoinTableCondition = null; // 或者设置为空数组 []
|
|
|
+ // 根据实际情况处理 spare 不是数组的情况
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // this.treeTableFormItems[1].options
|
|
|
},
|
|
|
// 监听表单值发生变化-表单配置的下方表单
|
|
|
handleQueryParamsTableChange(newParams) {
|
|
|
- if (newParams.tableId) {
|
|
|
- this.tableLoading = true
|
|
|
- this.getList(newParams.tableId)
|
|
|
+ if(this.treeSelect){
|
|
|
+ console.log('newParams',newParams)
|
|
|
+ if (newParams.tableId) {
|
|
|
+ this.tableLoading = true
|
|
|
+ this.getList(newParams.tableId,newParams)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
/** 查询动态格列表 */
|
|
|
- getList(id) {
|
|
|
+ getList(id,newParams) {
|
|
|
let queryParams = {
|
|
|
isEnablePaging: false,
|
|
|
}
|
|
|
listTable(queryParams).then((response) => {
|
|
|
if (response.code == 200) {
|
|
|
+
|
|
|
this.treeTableFormItems[0].options = response.rows.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- label: item.dtName,
|
|
|
- value: item.tId,
|
|
|
- }
|
|
|
- })
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: item.dtName,
|
|
|
+ value: item.tId,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
if (id) {
|
|
|
- console.log('--------newParams.tableId存在--------------', id,this.$refs.treeTableFormItems.queryParams)
|
|
|
+ console.log('--------newParams.tableId存在--------------', id,newParams, this.$refs.treeTableFormItems.queryParams)
|
|
|
// tableList是表格字段配置下面的表格
|
|
|
this.tableList = [];
|
|
|
// 如果id存在,则找出response.rows中id等于response.rows的item.tId的一项,给表格字段配置下面的表格赋值
|
|
@@ -666,14 +719,18 @@ export default {
|
|
|
this.tableList = [selectedItem];
|
|
|
this.tableLoading = false
|
|
|
//让关联表格下拉框有值
|
|
|
-
|
|
|
} else {
|
|
|
console.error("未找到与提供的ID匹配的项");
|
|
|
this.tableList = [];
|
|
|
this.tableLoading = false
|
|
|
}
|
|
|
+ if(this.editor.treeTableJoinTableCondition) {
|
|
|
+ this.handleTableChangeTree(id)
|
|
|
+ this.$refs.treeTableFormItems.queryParams.treeTableJoinTableCondition = this.editor.treeTableJoinTableCondition
|
|
|
+ this.treeSelect = false
|
|
|
+ }
|
|
|
} else {
|
|
|
-
|
|
|
+
|
|
|
this.loading = false
|
|
|
this.tableLoading = false
|
|
|
}
|
|
@@ -696,6 +753,9 @@ export default {
|
|
|
if (res.code === 200) {
|
|
|
this.editor = res.data
|
|
|
this.handleTableChange(this.editor.treeTableName)
|
|
|
+ // this.handleTableChangeTree(Number(this.editor.tableId))
|
|
|
+
|
|
|
+ console.log("res.data",res.data)
|
|
|
let {
|
|
|
menuName,
|
|
|
treeDesc,
|
|
@@ -705,7 +765,7 @@ export default {
|
|
|
treeTableCondition,
|
|
|
tableId,
|
|
|
tableNameDes,
|
|
|
- treeTableJoinTable,
|
|
|
+ treeTableJoinTableCondition,
|
|
|
treeShowLabel,
|
|
|
} = this.editor;
|
|
|
Object.assign(this.$refs.dynamicForm.queryParams, {
|
|
@@ -718,9 +778,11 @@ export default {
|
|
|
treeTableCondition,
|
|
|
});
|
|
|
Object.assign(this.$refs.treeTableFormItems.queryParams, {
|
|
|
- tableId:Number(tableId),
|
|
|
- // dtName: this.editData.dtName
|
|
|
+ tableId: Number(tableId),
|
|
|
+ // treeTableJoinTableCondition,
|
|
|
});
|
|
|
+ // this.handleTableChangeTree(Number(tableId))
|
|
|
+
|
|
|
this.$refs.dynamicForm.queryParams.menuId = this.getParentMenuId(
|
|
|
res.data.menuId,
|
|
|
this.treeFormItems[2].menus,
|