|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
<!-- @formOptChange="formOptChange" -->
|
|
|
- <fc-designer ref="designer" height="100vh" :config="config" @save="handleSave" @active="active"
|
|
|
+ <fc-designer ref="designer" height="100vh" :config="config" @save="handleSave" @active="active" @delete="deleteItem"
|
|
|
@activeRuleChange="activeRuleChange">
|
|
|
<template #handle>
|
|
|
<div class="handle">
|
|
|
@@ -60,10 +60,10 @@
|
|
|
<el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addMainDisplayColumn"
|
|
|
:disabled="!selectedMainTable"></el-button>
|
|
|
</div>
|
|
|
-
|
|
|
<div v-for="(column, index) in mainDisplayColumns" :key="index" class="display-column-item">
|
|
|
<el-select v-model="column.selectedColumn" placeholder="请选择展示列" clearable>
|
|
|
- <el-option v-for="col in availableMainColumns" :key="col.value" :label="col.label || col.fieldDescription" :value="col.value" />
|
|
|
+ <el-option v-for="col in availableMainColumns" :key="col.value" :label="col.label || col.fieldDescription"
|
|
|
+ :value="col.value" />
|
|
|
</el-select>
|
|
|
<el-button type="danger" icon="el-icon-delete" circle size="mini"
|
|
|
@click="removeMainDisplayColumn(index)"></el-button>
|
|
|
@@ -134,10 +134,16 @@
|
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog title="选择字段数据" :visible.sync="optionDataDisplay" class="_fc-t-dialog optionDataDisplay">
|
|
|
+ <optionData :mode="mode" :optionDataComponentType="optionDataComponentType" :optionDataDisplay="optionDataDisplay"
|
|
|
+ @saveRule="saveRule" :multipleTables="multipleTables" />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import optionData from "./components/optionData.vue"
|
|
|
import { copyTextToClipboardXg } from "../../utils/index";
|
|
|
// import { copyTextToClipboard } from "../../utils";
|
|
|
import formCreate from '@form-create/element-ui';
|
|
|
@@ -188,6 +194,7 @@ export default {
|
|
|
name: "formCreateMange",
|
|
|
props: [],
|
|
|
components: {
|
|
|
+ optionData
|
|
|
},
|
|
|
data() {
|
|
|
let data = window.location.hash.substring(1);
|
|
|
@@ -200,6 +207,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
+ // 组件参数----start
|
|
|
+ optionDataComponentType: {},
|
|
|
+ optionDataDisplay: false,
|
|
|
+ multipleTables: [],
|
|
|
+ // 组件参数----end
|
|
|
formState: false,
|
|
|
selectedMainTable: '',
|
|
|
mainTableOptions: [],
|
|
|
@@ -249,20 +261,6 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- // baseRule: {
|
|
|
- // prepend: true,
|
|
|
- // rule: function () { // 改为普通函数
|
|
|
- // return [
|
|
|
- // {
|
|
|
- // type: 'select',
|
|
|
- // field: 'formCreateFieldLM',
|
|
|
- // title: '列名',
|
|
|
- // value: '',
|
|
|
- // options: []
|
|
|
- // },
|
|
|
- // ];
|
|
|
- // }
|
|
|
- // },
|
|
|
componentRule: {
|
|
|
zkqyTable: {
|
|
|
prepend: true,
|
|
|
@@ -616,7 +614,6 @@ export default {
|
|
|
const zkqyTablePageJson = pageJson.filter(item => item.type === "zkqyTable");
|
|
|
if (zkqyTableItem) {
|
|
|
this.$refs.designer.setRule(pageJson)
|
|
|
-
|
|
|
let x = this.$refs.designer.getRule()
|
|
|
let { htmlDataMb } = this.$refs.designer.getSaveDate()
|
|
|
// 1. 移除原有的 Vue.use() 调用
|
|
|
@@ -633,22 +630,30 @@ export default {
|
|
|
// 2. 添加自定义代码
|
|
|
// console.log('pageJson', pageJson)
|
|
|
let url = process.env.VUE_APP_BASE_API3
|
|
|
- const customCode = zkqyTableTemplate(columns, zkqyTablePageJson, dataSource,url);
|
|
|
+ const customCode = zkqyTableTemplate(columns, zkqyTablePageJson, dataSource, url);
|
|
|
// 3. 在 new Vue 之前插入自定义代码
|
|
|
htmlData = modifiedHtml.replace(
|
|
|
/new Vue\({/,
|
|
|
`${customCode}\nnew Vue({`
|
|
|
);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
} else {
|
|
|
+ let htmlDataMbZkqyData;
|
|
|
this.$refs.designer.setRule(pageJson)
|
|
|
-
|
|
|
let x = this.$refs.designer.getRule()
|
|
|
+ if(this.multipleTables.length>0){
|
|
|
+ console.log('[this.multipleTables]',this.multipleTables)
|
|
|
+ let multipleTables = this.multipleTables
|
|
|
+ let url = process.env.VUE_APP_BASE_API3
|
|
|
+ let { htmlDataMb } = this.$refs.designer.getSaveDate(JSON.stringify(multipleTables),dataSource,url)
|
|
|
+ htmlDataMbZkqyData = htmlDataMb
|
|
|
+
|
|
|
+
|
|
|
+ }else{
|
|
|
let { htmlDataMb } = this.$refs.designer.getSaveDate()
|
|
|
+ htmlDataMbZkqyData = htmlDataMb
|
|
|
|
|
|
- htmlData = htmlDataMb
|
|
|
+ }
|
|
|
+ htmlData = htmlDataMbZkqyData
|
|
|
}
|
|
|
console.log('========encodeURIComponent前===================', htmlData)
|
|
|
htmlData = encodeURIComponent(htmlData); // 关键编码步骤
|
|
|
@@ -659,7 +664,8 @@ export default {
|
|
|
pageLink,
|
|
|
componentData,
|
|
|
htmlData,
|
|
|
- name
|
|
|
+ name,
|
|
|
+ multipleTreeParam: JSON.stringify(this.multipleTables)
|
|
|
};
|
|
|
let res;
|
|
|
if (this.mode == 3) {
|
|
|
@@ -679,7 +685,6 @@ export default {
|
|
|
path: "/ydyq/formCreate",
|
|
|
});
|
|
|
} else {
|
|
|
- console.err('----')
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -688,15 +693,21 @@ export default {
|
|
|
let r = this.row?.pageJson
|
|
|
// this.zkqyTableColumns
|
|
|
let o = this.row?.pageOptions
|
|
|
+ o = JSON.parse(o)
|
|
|
+ console.log('o1',o)
|
|
|
+
|
|
|
+ if(o.onSubmit) delete o.onSubmit;
|
|
|
+ o=JSON.stringify(o)
|
|
|
this.$refs.designer.setOptions(o);
|
|
|
+ console.log('o',o)
|
|
|
this.$refs.designer.setRule(r);
|
|
|
// 查找 type 为 "zkqyTable" 的对象
|
|
|
const tableObject = JSON.parse(r).find(item => item.type === "zkqyTable");
|
|
|
- console.log('tableObject', tableObject)
|
|
|
+ // console.log('tableObject', tableObject)
|
|
|
if (tableObject && tableObject.columns) {
|
|
|
this.zkqyTableColumns = tableObject.columns;
|
|
|
this.tableObject = { columns: tableObject.columns }; // 设置编辑数据
|
|
|
- console.log(' this.tableObject', this.tableObject)
|
|
|
+ // console.log(' this.tableObject', this.tableObject)
|
|
|
|
|
|
}
|
|
|
} catch (error) {
|
|
|
@@ -716,7 +727,6 @@ export default {
|
|
|
opt,
|
|
|
rule: formCreate.toJson(rule)
|
|
|
}));
|
|
|
-
|
|
|
},
|
|
|
showTemplate() {
|
|
|
this.state = true;
|
|
|
@@ -827,6 +837,27 @@ export default {
|
|
|
],
|
|
|
false
|
|
|
)
|
|
|
+ this.$refs.designer.setComponentRuleConfig(['radio', 'checkbox', 'select', 'cascader', 'elTransfer', 'tree'],
|
|
|
+ (componentType) => [
|
|
|
+ {
|
|
|
+ type: 'button',
|
|
|
+ field: 'zkqyOptionData',
|
|
|
+ title: '选择字段数据',
|
|
|
+ value: '',
|
|
|
+ props: {
|
|
|
+ type: 'primary',
|
|
|
+ size: 'small',
|
|
|
+ icon: 'el-icon-plus'
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.optionData(componentType);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ true
|
|
|
+ )
|
|
|
this.$refs.designer.setComponentRuleConfig('default', // id
|
|
|
() => [ // rule 函数，返回 Rule[]
|
|
|
{
|
|
|
@@ -846,8 +877,57 @@ export default {
|
|
|
],
|
|
|
true,
|
|
|
)
|
|
|
+
|
|
|
});
|
|
|
},
|
|
|
+ optionData(componentType) {
|
|
|
+ console.log('当前组件类型:', componentType)
|
|
|
+ this.optionDataComponentType = componentType
|
|
|
+ this.optionDataDisplay = true
|
|
|
+ },
|
|
|
+ saveRule(data) {
|
|
|
+ console.log('[saveRule方法接收到的传参]', data)
|
|
|
+ // this.multipleTables.push(data)
|
|
|
+ // 检查 this.multipleTables数组中有没有对象的_fc_id和data._fc_id相等的，有的话替换这个对象
|
|
|
+ const existingIndex = this.multipleTables.findIndex(
|
|
|
+ item => item._fc_id == data._fc_id
|
|
|
+ );
|
|
|
+
|
|
|
+ if (existingIndex !== -1) {
|
|
|
+ // 如果存在，替换该对象
|
|
|
+ this.multipleTables.splice(existingIndex, 1, data);
|
|
|
+ console.log('替换已存在的配置', existingIndex);
|
|
|
+ } else {
|
|
|
+ // 如果不存在，添加到数组
|
|
|
+ this.multipleTables.push(data);
|
|
|
+ console.log('添加新配置');
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('当前 multipleTables:', this.multipleTables);
|
|
|
+ },
|
|
|
+ deleteItem(e) {
|
|
|
+ console.log('[组件被删除时的事件]', e)
|
|
|
+ // 如果e?.type等于['radio', 'checkbox', 'select', 'cascader', 'elTransfer', 'tree']中的就获取e?._fc_id
|
|
|
+ //获取到以后查看 this.multipleTables数组中有没有对象的_fc_id和e._fc_id相等的，有的话删除这个对象
|
|
|
+ if (e?.type && ['radio', 'checkbox', 'select', 'cascader', 'elTransfer', 'tree'].includes(e.type)) {
|
|
|
+ const fcId = e?._fc_id;
|
|
|
+
|
|
|
+ if (fcId) {
|
|
|
+ // 查找 this.multipleTables 中是否有匹配的对象
|
|
|
+ const index = this.multipleTables.findIndex(item => item._fc_id === fcId);
|
|
|
+
|
|
|
+ if (index !== -1) {
|
|
|
+ // 删除匹配的对象
|
|
|
+ this.multipleTables.splice(index, 1);
|
|
|
+ console.log(`已删除 _fc_id 为 ${fcId} 的对象`);
|
|
|
+ } else {
|
|
|
+ console.log(`未在this.multipleTables（六个特殊类型的存值）中找到 _fc_id 为 ${fcId} 的对象`);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.warn('e._fc_id 不存在');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
active(e, gLSJB) {
|
|
|
// console.log('e---------',e,gLSJB)
|
|
|
if (gLSJB) {
|
|
|
@@ -931,43 +1011,43 @@ export default {
|
|
|
this.selectedMainTable = firstMainCol.tableName;
|
|
|
// 加载主表列数据
|
|
|
try {
|
|
|
- // 加载主表列数据
|
|
|
- await this.handleMainTableChange(firstMainCol.tableName);
|
|
|
-
|
|
|
- // 确保 this.mainTableColumns 已加载
|
|
|
- console.log('this.mainTableColumns',this.mainTableColumns)
|
|
|
- mainTableColumns.forEach(col => {
|
|
|
- this.mainDisplayColumns.push({
|
|
|
- selectedColumn: col.showValue, // 字段名
|
|
|
- options: this.mainTableColumns, // 确保 options 已加载
|
|
|
- });
|
|
|
- });
|
|
|
- } catch (error) {
|
|
|
- console.error("加载主表列失败:", error);
|
|
|
- }
|
|
|
+ // 加载主表列数据
|
|
|
+ await this.handleMainTableChange(firstMainCol.tableName);
|
|
|
+
|
|
|
+ // 确保 this.mainTableColumns 已加载
|
|
|
+ console.log('this.mainTableColumns', this.mainTableColumns)
|
|
|
+ mainTableColumns.forEach(col => {
|
|
|
+ this.mainDisplayColumns.push({
|
|
|
+ selectedColumn: col.showValue, // 字段名
|
|
|
+ options: this.mainTableColumns, // 确保 options 已加载
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error("加载主表列失败:", error);
|
|
|
+ }
|
|
|
}
|
|
|
// 如果有子表数据
|
|
|
if (subTablesData.length > 0) {
|
|
|
let data = {
|
|
|
- databaseName: this.databaseName,
|
|
|
- databaseType: this.databaseType,
|
|
|
- };
|
|
|
- // 替换为你的实际接口
|
|
|
- getAllTable(data).then(response => {
|
|
|
- if (response.code === 200) {
|
|
|
- this.subTableOptions = response.data.map(item => ({
|
|
|
- ...item,
|
|
|
- label: item.tableComment || item.tableName,
|
|
|
- value: item.tableName
|
|
|
- }));
|
|
|
+ databaseName: this.databaseName,
|
|
|
+ databaseType: this.databaseType,
|
|
|
+ };
|
|
|
+ // 替换为你的实际接口
|
|
|
+ getAllTable(data).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.subTableOptions = response.data.map(item => ({
|
|
|
+ ...item,
|
|
|
+ label: item.tableComment || item.tableName,
|
|
|
+ value: item.tableName
|
|
|
+ }));
|
|
|
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
+ this.$message.error('加载子表失败');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
this.$message.error('加载子表失败');
|
|
|
- }
|
|
|
- }).catch(error => {
|
|
|
- this.$message.error('加载子表失败');
|
|
|
- console.error(error);
|
|
|
- });
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
// 按子表分组
|
|
|
const subTablesGrouped = subTablesData.reduce((acc, col) => {
|
|
|
if (!acc[col.tableName]) {
|
|
|
@@ -1000,7 +1080,7 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
console.log(' this.subTables', this.subTables)
|
|
|
- console.log('subTable.tableName',subTable.tableName)
|
|
|
+ console.log('subTable.tableName', subTable.tableName)
|
|
|
}).catch(error => {
|
|
|
console.error("加载子表列失败:", error);
|
|
|
});
|
|
|
@@ -1277,10 +1357,33 @@ export default {
|
|
|
this.$refs.designer.setRule(this.hashData.rule);
|
|
|
} else {
|
|
|
this.addZkqyMenu()
|
|
|
-
|
|
|
this.mode = sessionStorage.getItem("form_mode");
|
|
|
if (this.mode == '3') {
|
|
|
this.row = JSON.parse(sessionStorage.getItem("form_row"));
|
|
|
+ // 检查 multipleTreeParam 是否存在，并确保它是数组
|
|
|
+ if (this.row && this.row.multipleTreeParam) {
|
|
|
+ if (Array.isArray(this.row.multipleTreeParam)) {
|
|
|
+ // 如果已经是数组，直接赋值
|
|
|
+ this.multipleTables = this.row.multipleTreeParam;
|
|
|
+ } else if (typeof this.row.multipleTreeParam === 'string') {
|
|
|
+ try {
|
|
|
+ // 如果是 JSON 字符串，尝试解析为数组
|
|
|
+ const parsedData = JSON.parse(this.row.multipleTreeParam);
|
|
|
+ this.multipleTables = Array.isArray(parsedData) ? parsedData : [parsedData];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('解析 multipleTreeParam 失败:', error);
|
|
|
+ this.multipleTables = []; // 解析失败时初始化为空数组
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果是对象或其他类型，转换为数组
|
|
|
+ this.multipleTables = [this.row.multipleTreeParam];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果 multipleTreeParam 不存在，初始化为空数组
|
|
|
+ this.multipleTables = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('[打印 this.multipleTables]', this.multipleTables);
|
|
|
} else {
|
|
|
this.row = ''
|
|
|
}
|
|
|
@@ -1430,11 +1533,6 @@ body {
|
|
|
flex-direction: column !important;
|
|
|
}
|
|
|
|
|
|
-/* #app {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex: 1;
|
|
|
-} */
|
|
|
|
|
|
._fc-copyright {
|
|
|
display: flex;
|
|
|
@@ -1601,4 +1699,13 @@ body {
|
|
|
flex: 1;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.optionDataDisplay>>>.el-dialog__body {
|
|
|
+ padding-top: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.optionDataDisplay>>>.el-dialog {
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
</style>
|
sql715