|
|
|
@ -283,6 +283,7 @@ const jieForm = () => { |
|
|
|
console.log("解析表单--->", data); |
|
|
|
formTableField.masterTable = data.data.masterTable; |
|
|
|
formTableField.sunTable = data.data.sunTable; |
|
|
|
formTableField.sunFormList = data.data.sunFormList; |
|
|
|
nextTick(() => { |
|
|
|
columnDrop(); |
|
|
|
getListInfo(); |
|
|
|
@ -557,13 +558,18 @@ const tableFieldAttrButClick = (val: tableButton[]) => { |
|
|
|
@ 时间: 2024-05-21 16:00:41 |
|
|
|
@ 功能: 定义自定义表头 |
|
|
|
*/ |
|
|
|
const readerColumn = (column: any) => { |
|
|
|
let labelLong = column.label.length; // 表头label长度 |
|
|
|
if (column.label.length < 3) { |
|
|
|
labelLong = 3; |
|
|
|
const readerColumn = (column: any, isSun: int) => { |
|
|
|
console.log("定义自定义表头------------------->", column, isSun); |
|
|
|
if (isSun != 1) { |
|
|
|
let labelLong = column.label.length; // 表头label长度 |
|
|
|
if (column.label.length < 3) { |
|
|
|
labelLong = 3; |
|
|
|
} |
|
|
|
let size = 30; // 根据需求定义一个字体的标尺 |
|
|
|
return labelLong * size; |
|
|
|
} else { |
|
|
|
return "100%"; |
|
|
|
} |
|
|
|
let size = 30; // 根据需求定义一个字体的标尺 |
|
|
|
return labelLong * size; |
|
|
|
}; |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ -630,14 +636,97 @@ const tableListFieldClick = (val: any[]) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
console.log("state.tableData.columns", state.tableData.columns); |
|
|
|
console.log("state.tableData.columns", state.tableData); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2025-03-11 14:10:41 |
|
|
|
@ 功能: 子列表操作字段 |
|
|
|
*/ |
|
|
|
const tableSunListFieldClick = (name: string, key: string, val: any[]) => { |
|
|
|
console.log("列表字段处理-222222222->", name, key, val); |
|
|
|
if (state.tableData.columns.length > 0) { |
|
|
|
if (val.length > 0) { |
|
|
|
let isTrue = true; |
|
|
|
state.tableData.columns.forEach((itemTab: tableButton, index: number) => { |
|
|
|
if (itemTab.id == key) { |
|
|
|
itemTab.children = val; //删除列表中已经存在的字段 |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if (isTrue) { |
|
|
|
state.tableData.columns.push({ |
|
|
|
id: key, |
|
|
|
label: name, |
|
|
|
field: key, |
|
|
|
type: "", |
|
|
|
attribute: "", |
|
|
|
pattern: "table", |
|
|
|
fieldClass: "", |
|
|
|
auxiliary: "", |
|
|
|
activeValue: "", |
|
|
|
inactiveValue: "", |
|
|
|
config: { |
|
|
|
optionsType: 0, |
|
|
|
}, |
|
|
|
control: { |
|
|
|
optionsValue3Formid: "", |
|
|
|
optionsValue3Field: "", |
|
|
|
}, |
|
|
|
options: null, |
|
|
|
children: val, |
|
|
|
}); |
|
|
|
} |
|
|
|
} else { |
|
|
|
state.tableData.columns.forEach((itemTab: tableButton, index: number) => { |
|
|
|
if (itemTab.id == key) { |
|
|
|
state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} else { |
|
|
|
state.tableData.columns.push({ |
|
|
|
id: key, |
|
|
|
label: name, |
|
|
|
field: key, |
|
|
|
type: "", |
|
|
|
attribute: "", |
|
|
|
pattern: "table", |
|
|
|
fieldClass: "", |
|
|
|
auxiliary: "", |
|
|
|
activeValue: "", |
|
|
|
inactiveValue: "", |
|
|
|
config: { |
|
|
|
optionsType: 0, |
|
|
|
}, |
|
|
|
control: { |
|
|
|
optionsValue3Formid: "", |
|
|
|
optionsValue3Field: "", |
|
|
|
}, |
|
|
|
options: null, |
|
|
|
children: val, |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:05:22 |
|
|
|
@ 功能: 处理查询条件 |
|
|
|
#val 当前按钮值 |
|
|
|
#tableKey 表格标识符 |
|
|
|
#isTrue 开启&关闭 |
|
|
|
*/ |
|
|
|
const addOrDelSearchField = (val: attrButton, isTrue: boolean) => { |
|
|
|
const addOrDelSearchField = (val: attrButton, tableKey: string, isTrue: boolean) => { |
|
|
|
if (tableKey == "") { |
|
|
|
val.isMsater = true; |
|
|
|
val.sunFormKey = tableKey; |
|
|
|
} else { |
|
|
|
val.isMsater = false; |
|
|
|
val.sunFormKey = tableKey; |
|
|
|
} |
|
|
|
|
|
|
|
console.log("处理查询条件", state.searchData); |
|
|
|
if (isTrue) { |
|
|
|
if (state.searchData.length > 0) { |
|
|
|
@ -972,9 +1061,77 @@ const dialogConfirm = (editVal: string) => { |
|
|
|
表格列设置区域,可从左上角 添加表格列字段 选择已有列或直接从上方工具栏 |
|
|
|
生成脚本预览 编辑 |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-table :data="[{}]" v-bind="state.tableData.tableProps || {}" ref="tableEl"> |
|
|
|
<template v-for="item in state.tableData.columns" :key="item.prop || item.label"> |
|
|
|
<el-table-column v-bind="item" :width="readerColumn(item)"> |
|
|
|
<el-table-column |
|
|
|
v-if="item.pattern !== 'table'" |
|
|
|
v-bind="item" |
|
|
|
:width="readerColumn(item)" |
|
|
|
> |
|
|
|
<template #header="scope"> |
|
|
|
<div class="field_close"> |
|
|
|
<el-text>{{ item.label }}</el-text> |
|
|
|
<i |
|
|
|
><el-icon @click="delCol(item)"><Close /></el-icon |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
<el-tooltip placement="top" v-if="item.help"> |
|
|
|
<template #content> |
|
|
|
<span v-html="item.help"></span> |
|
|
|
</template> |
|
|
|
<i class="icon-help"></i> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
<template #default v-if="item.field !== 'index'"> |
|
|
|
<el-checkbox v-if="item.field === 'checkbox'" /> |
|
|
|
<span v-if="item.field === 'operate'">操作</span> |
|
|
|
<span |
|
|
|
v-if=" |
|
|
|
item.field !== 'checkbox' && |
|
|
|
item.field !== 'operate' && |
|
|
|
item.pattern !== 'table' |
|
|
|
" |
|
|
|
>数据</span |
|
|
|
> |
|
|
|
<el-table |
|
|
|
v-if="item.pattern == 'table'" |
|
|
|
:data="[{}]" |
|
|
|
v-bind="state.tableData.tableProps || {}" |
|
|
|
> |
|
|
|
<template |
|
|
|
v-for="itemSun in item.children" |
|
|
|
:key="itemSun.prop || itemSun.label" |
|
|
|
> |
|
|
|
<el-table-column v-bind="itemSun" :width="readerColumn(itemSun)"> |
|
|
|
<template #header="scope"> |
|
|
|
<div class="field_close"> |
|
|
|
<el-text>{{ itemSun.label }}</el-text> |
|
|
|
<i |
|
|
|
><el-icon @click="delCol(itemSun)"><Close /></el-icon |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
<el-tooltip placement="top" v-if="itemSun.help"> |
|
|
|
<template #content> |
|
|
|
<span v-html="itemSun.help"></span> |
|
|
|
</template> |
|
|
|
<i class="icon-help"></i> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
<template #default v-if="itemSun.field !== 'index'"> |
|
|
|
<el-checkbox v-if="itemSun.field === 'checkbox'" /> |
|
|
|
<span v-if="itemSun.field === 'operate'">操作</span> |
|
|
|
<span |
|
|
|
v-if="itemSun.field !== 'checkbox' && itemSun.field !== 'operate'" |
|
|
|
>数据</span |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-else v-bind="item"> |
|
|
|
<template #header="scope"> |
|
|
|
<div class="field_close"> |
|
|
|
<el-text>{{ item.label }}</el-text> |
|
|
|
@ -992,9 +1149,49 @@ const dialogConfirm = (editVal: string) => { |
|
|
|
<template #default v-if="item.field !== 'index'"> |
|
|
|
<el-checkbox v-if="item.field === 'checkbox'" /> |
|
|
|
<span v-if="item.field === 'operate'">操作</span> |
|
|
|
<span v-if="item.field !== 'checkbox' && item.field !== 'operate'" |
|
|
|
<span |
|
|
|
v-if=" |
|
|
|
item.field !== 'checkbox' && |
|
|
|
item.field !== 'operate' && |
|
|
|
item.pattern !== 'table' |
|
|
|
" |
|
|
|
>数据</span |
|
|
|
> |
|
|
|
<el-table |
|
|
|
v-if="item.pattern == 'table'" |
|
|
|
:data="[{}]" |
|
|
|
v-bind="state.tableData.tableProps || {}" |
|
|
|
> |
|
|
|
<template |
|
|
|
v-for="itemSun in item.children" |
|
|
|
:key="itemSun.prop || itemSun.label" |
|
|
|
> |
|
|
|
<el-table-column v-bind="itemSun" :width="readerColumn(itemSun)"> |
|
|
|
<template #header="scope"> |
|
|
|
<div class="field_close"> |
|
|
|
<el-text>{{ itemSun.label }}</el-text> |
|
|
|
<i |
|
|
|
><el-icon @click="delCol(itemSun)"><Close /></el-icon |
|
|
|
></i> |
|
|
|
</div> |
|
|
|
<el-tooltip placement="top" v-if="itemSun.help"> |
|
|
|
<template #content> |
|
|
|
<span v-html="itemSun.help"></span> |
|
|
|
</template> |
|
|
|
<i class="icon-help"></i> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
<template #default v-if="itemSun.field !== 'index'"> |
|
|
|
<el-checkbox v-if="itemSun.field === 'checkbox'" /> |
|
|
|
<span v-if="itemSun.field === 'operate'">操作</span> |
|
|
|
<span |
|
|
|
v-if="itemSun.field !== 'checkbox' && itemSun.field !== 'operate'" |
|
|
|
>数据</span |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
</el-table> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
@ -1081,7 +1278,7 @@ const dialogConfirm = (editVal: string) => { |
|
|
|
<el-table-column fixed type="selection" width="40" align="center" /> |
|
|
|
<el-table-column prop="label" label="字段"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.row.label }}({{ scope.row.fieldClass }}[{{ scope.row.pattern }}]) |
|
|
|
{{ scope.row.label }}({{ scope.row.field }}[{{ scope.row.pattern }}]) |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="查询" width="55" align="center"> |
|
|
|
@ -1091,12 +1288,59 @@ const dialogConfirm = (editVal: string) => { |
|
|
|
:active-action-icon="View" |
|
|
|
:inactive-action-icon="Hide" |
|
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" |
|
|
|
@change="addOrDelSearchField(scope.row, $event)" |
|
|
|
@change="addOrDelSearchField(scope.row, '', $event)" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-divider |
|
|
|
v-if="formTableField.sunFormList && formTableField.sunFormList.length > 0" |
|
|
|
content-position="left" |
|
|
|
>子表字段</el-divider |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if="formTableField.sunFormList && formTableField.sunFormList.length > 0" |
|
|
|
class="sunFormBox" |
|
|
|
> |
|
|
|
<el-tabs type="border-card"> |
|
|
|
<el-tab-pane |
|
|
|
v-for="sunItem in formTableField.sunFormList" |
|
|
|
:label="sunItem.name" |
|
|
|
> |
|
|
|
<el-table |
|
|
|
:data="sunItem.fields" |
|
|
|
border |
|
|
|
@selection-change=" |
|
|
|
tableSunListFieldClick(sunItem.name, sunItem.fieldKey, $event) |
|
|
|
" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table-column fixed type="selection" width="40" align="center" /> |
|
|
|
<el-table-column prop="label" label="字段"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.row.label }}({{ scope.row.field }}[{{ scope.row.pattern }}]) |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="查询" width="55" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-switch |
|
|
|
v-model="scope.row.isSearch" |
|
|
|
:active-action-icon="View" |
|
|
|
:inactive-action-icon="Hide" |
|
|
|
style=" |
|
|
|
--el-switch-on-color: #13ce66; |
|
|
|
--el-switch-off-color: #ff4949; |
|
|
|
" |
|
|
|
@change="addOrDelSearchField(scope.row, sunItem.fieldKey, $event)" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="列表设置" :name="2"> |
|
|
|
<el-divider content-position="left">开启视图</el-divider> |
|
|
|
@ -1766,7 +2010,11 @@ const dialogConfirm = (editVal: string) => { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sunFormBox { |
|
|
|
:deep .el-tabs__content { |
|
|
|
padding: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.mainBox { |
|
|
|
border-left: 1px solid #ececec; |
|
|
|
border-right: 1px solid #ececec; |
|
|
|
|