|
|
|
@ -4,22 +4,925 @@ |
|
|
|
@ 备注: 表单列表 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { ElTable } from 'element-plus' |
|
|
|
import { Hide, View } from '@element-plus/icons-vue' |
|
|
|
import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogButtonList,diaOrDrawer } from '@/api/DesignForm/tableButton' |
|
|
|
|
|
|
|
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|
|
|
import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index' |
|
|
|
import { gainFormTableField,editCustomerFormList,gainFormListCont } from '@/api/DesignForm/requestapi' |
|
|
|
import { formTableField,formTabelStruct } from "@/api/DesignForm/type"; |
|
|
|
|
|
|
|
import tempOtherUnit from '@/components/DesignForm/pageList/types' |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
|
|
import Sortable from 'sortablejs' |
|
|
|
//引入子组件 |
|
|
|
import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadToolsApp.vue' |
|
|
|
import ControlSetup from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue' |
|
|
|
import FieldSetUp from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue' |
|
|
|
import SearchField from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue' |
|
|
|
import PreviewPage from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue' |
|
|
|
import CodePage from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
appCont:{ |
|
|
|
type:Object, |
|
|
|
default(){ |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
formKey:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
groupKey:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
menuId:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
appPageKey:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
formVersion:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
state:{ |
|
|
|
type:Object, |
|
|
|
default(){ |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
const formTableActive = ref(1) //字段属性 |
|
|
|
const zhuDaunIsTrue = ref(false); |
|
|
|
const listButtonIsShow = ref(false) |
|
|
|
const formTableField = reactive<formTableField>({}) |
|
|
|
const container = ref() |
|
|
|
const drawer = reactive({ |
|
|
|
visible: false, |
|
|
|
title: '', |
|
|
|
direction: 'ltr', |
|
|
|
content: '', |
|
|
|
codeType: '' |
|
|
|
}) |
|
|
|
const setUpFieldIsOpen= ref(false) |
|
|
|
const setUpFieldInfo = ref<tableButton>() |
|
|
|
const codeIsShow = ref(false) //生成代码 |
|
|
|
const tableFieldList = ref<InstanceType<typeof ElTable>>() |
|
|
|
const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>() |
|
|
|
const tableAttrBut = ref<InstanceType<typeof ElTable>>() |
|
|
|
const emits = defineEmits<{ |
|
|
|
(e: 'update:state', val: formStruct): void |
|
|
|
(e: 'update:formKey', val: string): void |
|
|
|
(e: 'update:formVersion', val: string): void |
|
|
|
(e: 'judgeFlowIsEdit', val: boolean): void |
|
|
|
(e: 'runNextWindows', val: number): void |
|
|
|
(e: 'closeFormPage'): void |
|
|
|
}>() |
|
|
|
const statePro = computed({ |
|
|
|
get() { |
|
|
|
return props.state |
|
|
|
}, |
|
|
|
set(val: formStruct) { |
|
|
|
emits('update:state', val) |
|
|
|
} |
|
|
|
}); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:00:37 |
|
|
|
@ 功能: 自定义列表结构 |
|
|
|
*/ |
|
|
|
const state = reactive({ |
|
|
|
tableData: { |
|
|
|
// tableProps: {}, //表格所有参数 |
|
|
|
columns: [], |
|
|
|
config: {}, |
|
|
|
controlBtn:[], |
|
|
|
operateBtn:[] |
|
|
|
}, |
|
|
|
searchData: [], |
|
|
|
loading: false, |
|
|
|
attrObj: {}, |
|
|
|
config: { |
|
|
|
pageSize:10, |
|
|
|
searchIsShow:true, |
|
|
|
searchFormIsShow:true, |
|
|
|
openPageMode:"drawer" |
|
|
|
}, |
|
|
|
tagList: {}, |
|
|
|
formId: props.appPageKey.toString() || '', |
|
|
|
formList: [], // 所有可选表单数据源 |
|
|
|
name: '', |
|
|
|
treeData: {}, // 左侧树相关 |
|
|
|
previewVisible: false, |
|
|
|
tabsName: 'second', |
|
|
|
formFieldList: [], // 表单数据源所有可选字段 |
|
|
|
formApi:{ |
|
|
|
type:"1", |
|
|
|
addApiUrl:"", |
|
|
|
editApiUrl:"", |
|
|
|
delApiUrl:"", |
|
|
|
lookApiUrl:"" |
|
|
|
}, |
|
|
|
dict: {}, |
|
|
|
refreshTable: true |
|
|
|
}) |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 14:50:34 |
|
|
|
@ 功能: 选项卡事件 |
|
|
|
*/ |
|
|
|
const handleClick = () => { |
|
|
|
|
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 14:59:19 |
|
|
|
@ 功能: 功能按钮 |
|
|
|
*/ |
|
|
|
const tableAttrButClick = (val:tableButton[]) => { |
|
|
|
if(zhuDaunIsTrue.value == true){ |
|
|
|
if(state.tableData.controlBtn.length > 0){ |
|
|
|
state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length); |
|
|
|
state.tableData.controlBtn = val |
|
|
|
}else{ |
|
|
|
state.tableData.controlBtn = val |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:16:13 |
|
|
|
@ 功能: 设置功能按钮 |
|
|
|
*/ |
|
|
|
const setUpFieldBut = () => { |
|
|
|
// console.log("设置字段属性-->") |
|
|
|
listButtonIsShow.value = true |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:33:58 |
|
|
|
@ 功能: 更新列表记录操作按钮 |
|
|
|
*/ |
|
|
|
const updataLogBut = (val:attrButton[]) => { |
|
|
|
// console.log("更新列表记录操作按钮",val) |
|
|
|
let isWrete = true |
|
|
|
if(state.tableData.columns && state.tableData.columns.length > 0){ |
|
|
|
state.tableData.columns.forEach((item:any)=>{ |
|
|
|
if(item.fieldClass == "__control"){ |
|
|
|
state.tableData.operateBtn = val.value |
|
|
|
isWrete = false |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
if(isWrete){ |
|
|
|
state.tableData.operateBtn = []; |
|
|
|
} |
|
|
|
// console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:39:27 |
|
|
|
@ 功能: 解析表单 |
|
|
|
*/ |
|
|
|
const jieForm = () => { |
|
|
|
if(props.appPageKey != ""){ |
|
|
|
gainFormTableField({id:props.appPageKey.toString()}) |
|
|
|
.then((data)=>{ |
|
|
|
console.log('解析表单--->',data) |
|
|
|
formTableField.masterTable=data.data.masterTable |
|
|
|
formTableField.sunTable=data.data.sunTable |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:41:53 |
|
|
|
@ 功能: 组件加载完毕后执行 |
|
|
|
*/ |
|
|
|
onMounted(()=>{ |
|
|
|
jieForm(); |
|
|
|
nextTick(() => { |
|
|
|
columnDrop() |
|
|
|
getListInfo(); |
|
|
|
}) |
|
|
|
}) |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:42:18 |
|
|
|
@ 功能: 拖动字段排序 |
|
|
|
*/ |
|
|
|
const columnDrop = () => { |
|
|
|
const wrapperTr = container.value.querySelector( |
|
|
|
'.el-table__header-wrapper tr' |
|
|
|
) |
|
|
|
console.log("wrapperTr",wrapperTr) |
|
|
|
Sortable.create(wrapperTr, { |
|
|
|
animation: 180, |
|
|
|
delay: 0, |
|
|
|
onEnd: (evt: any) => { |
|
|
|
console.log("evt",evt.oldIndex,evt.newIndex) |
|
|
|
const oldItem = state.tableData.columns[evt.oldIndex] |
|
|
|
state.tableData.columns.splice(evt.oldIndex, 1) |
|
|
|
state.tableData.columns.splice(evt.newIndex, 0, oldItem) |
|
|
|
// 重染表格，否则点下面的设置对不上了 |
|
|
|
state.refreshTable = false |
|
|
|
nextTick(() => { |
|
|
|
state.refreshTable = true |
|
|
|
nextTick(() => { |
|
|
|
columnDrop() // 拖完后拖不到了，再执行一下 |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:43:23 |
|
|
|
@ 功能: 获取列表内容 |
|
|
|
*/ |
|
|
|
const getListInfo = () => { |
|
|
|
console.log("获取列表内容1111",props.appPageKey) |
|
|
|
gainFormListCont({id:props.appPageKey.toString()}) |
|
|
|
.then((data)=>{ |
|
|
|
console.log("获取列表内容",data) |
|
|
|
if(data.data.listjson != null && data.data.listjson != ""){ |
|
|
|
let stateData = string2json(data.data.listjson) |
|
|
|
console.log("获取列表内容---->",stateData) |
|
|
|
state.tableData = stateData.tableData |
|
|
|
state.searchData = stateData.searchData |
|
|
|
state.loading = stateData.loading |
|
|
|
state.attrObj = stateData.attrObj |
|
|
|
state.config = stateData.config |
|
|
|
state.tagList = stateData.tagList |
|
|
|
state.formId = stateData.formId |
|
|
|
state.formList = stateData.formList |
|
|
|
state.name = stateData.name |
|
|
|
state.treeData = stateData.treeData |
|
|
|
state.previewVisible = stateData.previewVisible |
|
|
|
state.formFieldList = stateData.formFieldList |
|
|
|
state.formApi = stateData.formApi |
|
|
|
state.dict = stateData.dict |
|
|
|
state.refreshTable = stateData.refreshTable |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
zhuDaunIsTrue.value = false |
|
|
|
|
|
|
|
if(state.tableData && state.tableData.columns && state.tableData.columns.length > 0) { |
|
|
|
|
|
|
|
if(formTableField.masterTable && formTableField.masterTable.length > 0){ |
|
|
|
state.tableData.columns.forEach((itemCol:any)=>{ |
|
|
|
formTableField.masterTable.forEach((item:any)=>{ |
|
|
|
if(itemCol.id == item.id){ |
|
|
|
console.log("========>",item) |
|
|
|
item.isSearch = true |
|
|
|
tableFieldList.value!.toggleRowSelection(item, true) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(tableAttrLogButtonList && tableAttrLogButtonList.length > 0){ |
|
|
|
state.tableData.columns.forEach((itemCol:any)=>{ |
|
|
|
tableAttrLogButtonList.forEach((item:any)=>{ |
|
|
|
if(itemCol.id == item.id){ |
|
|
|
tableFieldAttrBut.value!.toggleRowSelection(item, true) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if(state.tableData && state.tableData.controlBtn && state.tableData.controlBtn.length > 0) { |
|
|
|
|
|
|
|
state.tableData.controlBtn.forEach((itemCol:any)=>{ |
|
|
|
tableButtonList.forEach((item:any)=>{ |
|
|
|
if(itemCol.id == item.id){ |
|
|
|
tableAttrBut.value!.toggleRowSelection(item, true) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
zhuDaunIsTrue.value = true |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 15:59:43 |
|
|
|
@ 功能: 功能字段 |
|
|
|
*/ |
|
|
|
const tableFieldAttrButClick = (val:tableButton[]) => { |
|
|
|
if(zhuDaunIsTrue.value == true){ |
|
|
|
if(val.length > 0){ //判断是否有选中的字段 |
|
|
|
if(state.tableData.columns.length > 0){ //判断列表是否有数据 |
|
|
|
val.forEach((item:tableButton)=>{ |
|
|
|
let isTrue = true; |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton)=>{ |
|
|
|
if(item.id == itemTab.id){ |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if(isTrue){ |
|
|
|
state.tableData.columns.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ //列表无数据,直接新增 |
|
|
|
val.forEach((item:tableButton)=>{ |
|
|
|
state.tableData.columns.push(item) |
|
|
|
}) |
|
|
|
} |
|
|
|
//此处往下是处理列表中有为选中的字段 |
|
|
|
let delField = [] |
|
|
|
tableAttrLogButtonList.forEach((item:tableButton)=>{ |
|
|
|
let isTrue = true; |
|
|
|
val.forEach((itemVal:tableButton)=>{ |
|
|
|
if(item.id == itemVal.id){ |
|
|
|
isTrue = false |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isTrue){ |
|
|
|
delField.push(item.id) |
|
|
|
} |
|
|
|
}); |
|
|
|
if(delField.length > 0){ |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{ |
|
|
|
delField.forEach((item:string)=>{ |
|
|
|
if(item == itemTab.id){ |
|
|
|
state.tableData.columns.splice(index,1) //删除列表中已经存在的字段 |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
}else{ //无选中的字段 |
|
|
|
if(state.tableData.columns.length > 0){ |
|
|
|
tableAttrLogButtonList.forEach((item:tableButton)=>{ |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{ |
|
|
|
if(item.id == itemTab.id){ |
|
|
|
state.tableData.columns.splice(index,1) //删除列表中已经存在的字段 |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
if(state.tableData.columns.length > 0){ |
|
|
|
let isOpent = true; |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton)=>{ |
|
|
|
if(itemTab.fieldClass == "__control"){ |
|
|
|
isOpent = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if(isOpent){ |
|
|
|
state.tableData.operateBtn = []; |
|
|
|
} |
|
|
|
}else{ |
|
|
|
state.tableData.operateBtn = []; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:00:41 |
|
|
|
@ 功能: 定义自定义表头 |
|
|
|
*/ |
|
|
|
const readerColumn = (column:any) => { |
|
|
|
let labelLong = column.label.length // 表头label长度 |
|
|
|
if(column.label.length < 3) { |
|
|
|
labelLong = 3 |
|
|
|
} |
|
|
|
let size = 30 // 根据需求定义一个字体的标尺 |
|
|
|
return labelLong * size |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:02:55 |
|
|
|
@ 功能: 列表字段处理 |
|
|
|
*/ |
|
|
|
const tableListFieldClick = (val:any[]) => { |
|
|
|
console.log("列表字段处理-->",val) |
|
|
|
// zhuDaunIsTrue.value = true |
|
|
|
if(zhuDaunIsTrue.value == true){ |
|
|
|
if(val.length > 0){ |
|
|
|
if(state.tableData.columns.length > 0){ //判断列表是否有数据 |
|
|
|
val.forEach((item:tableButton)=>{ |
|
|
|
let isTrue = true; |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton)=>{ |
|
|
|
if(item.id == itemTab.id){ |
|
|
|
console.log("列表字段处理-111->",val) |
|
|
|
isTrue = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
if(isTrue){ |
|
|
|
state.tableData.columns.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ //列表无数据,直接新增 |
|
|
|
val.forEach((item:any)=>{ |
|
|
|
state.tableData.columns.push(item) |
|
|
|
}) |
|
|
|
} |
|
|
|
//此处往下是处理列表中有为选中的字段 |
|
|
|
let delField = [] |
|
|
|
formTableField.masterTable.forEach((item:tableButton)=>{ |
|
|
|
let isTrue = true; |
|
|
|
val.forEach((itemVal:tableButton)=>{ |
|
|
|
if(item.id == itemVal.id){ |
|
|
|
isTrue = false |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isTrue){ |
|
|
|
delField.push(item.id) |
|
|
|
} |
|
|
|
}); |
|
|
|
if(delField.length > 0){ |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{ |
|
|
|
delField.forEach((item:string)=>{ |
|
|
|
if(item == itemTab.id){ |
|
|
|
state.tableData.columns.splice(index,1) //删除列表中已经存在的字段 |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}); |
|
|
|
} |
|
|
|
}else{ |
|
|
|
if(state.tableData.columns.length > 0){ |
|
|
|
formTableField.masterTable.forEach((item:tableButton)=>{ |
|
|
|
state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{ |
|
|
|
if(item.id == itemTab.id){ |
|
|
|
state.tableData.columns.splice(index,1) //删除列表中已经存在的字段 |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:05:22 |
|
|
|
@ 功能: 处理查询条件 |
|
|
|
*/ |
|
|
|
const addOrDelSearchField = (val:attrButton,isTrue:boolean) => { |
|
|
|
if(isTrue){ |
|
|
|
if(state.searchData.length>0){ |
|
|
|
let isWrite = true; |
|
|
|
state.searchData.forEach((item:attrButton,index:number)=>{ |
|
|
|
if(item.id==val.id){ |
|
|
|
isWrite = false; |
|
|
|
} |
|
|
|
}) |
|
|
|
if(isWrite){ |
|
|
|
state.searchData.push(val) |
|
|
|
} |
|
|
|
}else{ |
|
|
|
state.searchData.push(val) |
|
|
|
} |
|
|
|
}else{ |
|
|
|
if(state.searchData.length>0){ |
|
|
|
state.searchData.forEach((item:attrButton,index:number)=>{ |
|
|
|
if(item.id==val.id){ |
|
|
|
state.searchData.splice(index,1) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:25:05 |
|
|
|
@ 功能: 列表头部按钮操作 |
|
|
|
*/ |
|
|
|
const listPageTools = (type: string) => { |
|
|
|
console.log("列表头部操作--》",type) |
|
|
|
switch(type){ |
|
|
|
case "del": |
|
|
|
clearData() |
|
|
|
break; |
|
|
|
case "eye": |
|
|
|
state.previewVisible = true |
|
|
|
break; |
|
|
|
case "json": |
|
|
|
drawer.title = "查看表格列表结构" |
|
|
|
dialogOpen(state, { direction: 'ltr', type: 'json' }) |
|
|
|
break; |
|
|
|
case "save": |
|
|
|
saveFormListData() |
|
|
|
case "close": |
|
|
|
emits('closeFormPage') |
|
|
|
break; |
|
|
|
default: |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:34:26 |
|
|
|
@ 功能: 添加自定义表单列表设定 |
|
|
|
*/ |
|
|
|
const saveFormListData = () => { |
|
|
|
const { type ,addApiUrl ,editApiUrl,delApiUrl,lookApiUrl } = state.formApi |
|
|
|
if(!props.appPageKey || props.appPageKey == "" || props.appPageKey == null || props.appPageKey == undefined){ |
|
|
|
return ElMessage.error('未知表单参数！请先保存前置表单后再操作！') |
|
|
|
} |
|
|
|
console.log("添加自定义表单列表设定",state.formApi) |
|
|
|
if(type != 1){ |
|
|
|
if(addApiUrl=="" || editApiUrl=="" || delApiUrl=="" || lookApiUrl == ""){ |
|
|
|
return ElMessage.error('请补全列表第三方APIUrl！') |
|
|
|
} |
|
|
|
} |
|
|
|
if(state.tableData.columns.length < 1){ |
|
|
|
return ElMessage.error('未设置表单查询项！不可提交！') |
|
|
|
} |
|
|
|
let params: any = { |
|
|
|
data: json2string(state), |
|
|
|
id: props.appPageKey.toString() |
|
|
|
} |
|
|
|
console.log("添加自定义表单列表设定",params) |
|
|
|
editCustomerFormList(params) |
|
|
|
.then((data)=>{ |
|
|
|
console.log("添加自定义表单列表设定",data) |
|
|
|
ElMessage.success(data.msg) |
|
|
|
}) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:25:22 |
|
|
|
@ 功能: 关闭预览 |
|
|
|
*/ |
|
|
|
const handlePreviewClose = () => { |
|
|
|
state.previewVisible = false |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:25:35 |
|
|
|
@ 功能: 清空数据 |
|
|
|
*/ |
|
|
|
const clearData = () => { |
|
|
|
tableFieldList.value!.clearSelection() |
|
|
|
tableFieldAttrBut.value!.clearSelection() |
|
|
|
tableAttrBut.value!.clearSelection() |
|
|
|
state.searchData = [] |
|
|
|
// state.tableData.controlBtn = [] |
|
|
|
// state.tableData.columns = [] |
|
|
|
state.tableData.operateBtn = [] |
|
|
|
state.tableData.config = {} |
|
|
|
if(formTableField.masterTable){ |
|
|
|
formTableField.masterTable.forEach((item)=>{ |
|
|
|
item.isSearch = false; |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-21 16:26:01 |
|
|
|
@ 功能: 数据格式处理 |
|
|
|
*/ |
|
|
|
const dialogOpen = (obj: any, params: any = {}) => { |
|
|
|
drawer.visible = true |
|
|
|
Object.assign(drawer, { direction: 'ltr' }, params) |
|
|
|
let editData = objToStringify(obj, true) |
|
|
|
switch (params.type) { |
|
|
|
case 'dict': |
|
|
|
editData = json2string(obj, true) |
|
|
|
break |
|
|
|
case 'beforeRequest': |
|
|
|
case 'beforeDelete': |
|
|
|
case 'treeBeforeRequest': |
|
|
|
if (!obj) { |
|
|
|
editData = beforeRequest |
|
|
|
} |
|
|
|
break |
|
|
|
case 'afterResponse': |
|
|
|
case 'treeAfterResponse': |
|
|
|
if (!obj) { |
|
|
|
editData = afterResponse |
|
|
|
} |
|
|
|
break |
|
|
|
} |
|
|
|
drawer.content = editData |
|
|
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<el-main class="mainBox">Main</el-main> |
|
|
|
<el-aside class="asideBox">Aside</el-aside> |
|
|
|
<el-main class="mainBox"> |
|
|
|
<div class="header"> |
|
|
|
<div class="field"> |
|
|
|
|
|
|
|
</div> |
|
|
|
<PageListHeadTools @clearData="listPageTools" /> |
|
|
|
</div> |
|
|
|
<div ref="container" class="table_box main_table"> |
|
|
|
|
|
|
|
<div class="search-box" > |
|
|
|
<SearchField v-if="state.searchData&&state.searchData.length>0&&state.config.searchIsShow" v-model:searchData="state.searchData" /> |
|
|
|
<div v-else class="tipBox" >条件查询搜索区域</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="operateButArea"> |
|
|
|
<div class="operatLeft"> |
|
|
|
<el-text v-if="state.tableData.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text> |
|
|
|
<el-button |
|
|
|
v-for="item in state.tableData.controlBtn" |
|
|
|
v-bind="item" |
|
|
|
:key="item.type" |
|
|
|
> |
|
|
|
{{ item.label }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-tooltip |
|
|
|
v-if="state.config.searchFormIsShow" |
|
|
|
class="box-item" |
|
|
|
effect="dark" |
|
|
|
content="折叠查询表单" |
|
|
|
placement="bottom" |
|
|
|
> |
|
|
|
<el-icon @click="state.config.searchIsShow=!state.config.searchIsShow"><Search /></el-icon> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="operateButArea tipBox" v-if="!state.tableData.columns?.length"> |
|
|
|
表格列设置区域，可从左上角 添加表格列字段 |
|
|
|
选择已有列或直接从上方工具栏 生成脚本预览 编辑 |
|
|
|
</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)"> |
|
|
|
|
|
|
|
<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'" >数据</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
</el-table> |
|
|
|
<div class="table-tip"> |
|
|
|
操作提示：<br /> |
|
|
|
*从数据列表配置中选择 所属表单<br /> |
|
|
|
*从左上角 添加表格字段 选择预设字段<br /> |
|
|
|
*可拖动表头字段移动调整表头字段排列顺序<br /> |
|
|
|
*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br /> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ace-drawer |
|
|
|
v-model="drawer.visible" |
|
|
|
:title="drawer.title" |
|
|
|
:direction="drawer.direction" |
|
|
|
:content="drawer.content" |
|
|
|
:code-type="drawer.codeType" |
|
|
|
@before-close="drawerBeforeClose" |
|
|
|
@confirm="dialogConfirm" |
|
|
|
/> |
|
|
|
<FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" /> |
|
|
|
<ControlSetup v-model:is-show="listButtonIsShow" v-model:contbutary:="state.tableData.operateBtn" @updata-log-but="updataLogBut" /> |
|
|
|
<CodePage v-model:is-show="codeIsShow" :list-data="state" /> |
|
|
|
|
|
|
|
<el-drawer |
|
|
|
v-model="state.previewVisible" |
|
|
|
title="列表预览" |
|
|
|
direction="btt" |
|
|
|
:before-close="handlePreviewClose" |
|
|
|
size="90%" |
|
|
|
> |
|
|
|
<ak-page-list |
|
|
|
:data="state.tableData" |
|
|
|
:search-data="state.searchData" |
|
|
|
:config="state.config" |
|
|
|
:form-id="props.appPageKey" |
|
|
|
v-if="state.previewVisible" |
|
|
|
/> |
|
|
|
|
|
|
|
</el-drawer> |
|
|
|
</el-main> |
|
|
|
<el-aside class="asideBox"> |
|
|
|
<el-tabs ref="multipleTableRef" v-model="formTableActive" @tab-click="handleClick"> |
|
|
|
<el-tab-pane label="字段设置" :name="1"> |
|
|
|
<el-divider content-position="left">功能字段</el-divider> |
|
|
|
<div class="form_tabs"> |
|
|
|
<el-table ref="tableFieldAttrBut" :data="tableAttrLogButtonList" border style="width: 100%" @selection-change="tableFieldAttrButClick"> |
|
|
|
<el-table-column fixed type="selection" width="40" align="center" /> |
|
|
|
<el-table-column prop="label" label="字段" /> |
|
|
|
<el-table-column fixed="right" label="设置" width="55" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-icon v-if="scope.row.fieldClass=='__control'" title="设置" @click="setUpFieldBut(scope.row)" class="shoushi"><Setting /></el-icon> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<el-divider content-position="left">列表字段</el-divider> |
|
|
|
<div class="form_tabs"> |
|
|
|
<el-table ref="tableFieldList" :data="formTableField.masterTable" border @selection-change="tableListFieldClick" 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.fieldClass}}[{{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, $event)" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="列表设置" :name="2"> |
|
|
|
<el-divider content-position="left">功能按钮</el-divider> |
|
|
|
<div class="form_tabs"> |
|
|
|
<el-table ref="tableAttrBut" :data="tableButtonList" border style="width: 100%" @selection-change="tableAttrButClick"> |
|
|
|
<el-table-column fixed type="selection" width="40" align="center" /> |
|
|
|
<el-table-column prop="label" label="字段" /> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<el-divider content-position="left">基本功能设置</el-divider> |
|
|
|
<div class="form_tabs"> |
|
|
|
<el-form :model="state.config" label-width="auto"> |
|
|
|
<el-form-item label="每页显示数据得数量"> |
|
|
|
<el-input-number |
|
|
|
v-model="state.config.pageSize" |
|
|
|
class="mx-4" |
|
|
|
:min="1" |
|
|
|
:max="10000" |
|
|
|
controls-position="right" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="数据添加编辑打开方式"> |
|
|
|
|
|
|
|
<el-select |
|
|
|
v-model="state.config.openPageMode" |
|
|
|
clearable |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="itemOpt in diaOrDrawer" |
|
|
|
:key="itemOpt.value" |
|
|
|
:label="itemOpt.label" |
|
|
|
:value="itemOpt.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="可折叠查询表单"> |
|
|
|
<el-switch |
|
|
|
v-model="state.config.searchFormIsShow" |
|
|
|
:active-action-icon="View" |
|
|
|
:inactive-action-icon="Hide" |
|
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<el-divider content-position="left">数据处理事件</el-divider> |
|
|
|
<div class="form_tabs"> |
|
|
|
<el-form :model="state.formApi" label-width="auto"> |
|
|
|
<el-form-item label="数据处理方式"> |
|
|
|
<el-switch |
|
|
|
v-model="state.formApi.type" |
|
|
|
active-text="默认" |
|
|
|
inactive-text="第三方API" |
|
|
|
active-value="1" |
|
|
|
inactive-value="2" |
|
|
|
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409EFF" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="state.formApi.type!=1" label="填加APIUrl"> |
|
|
|
<el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址"> |
|
|
|
<template #prefix>http://</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="state.formApi.type!=1" label="编辑APIUrl"> |
|
|
|
<el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址"> |
|
|
|
<template #prefix>http://</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="state.formApi.type!=1" label="删除APIUrl"> |
|
|
|
<el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址"> |
|
|
|
<template #prefix>http://</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="state.formApi.type!=1" label="查看APIUrl"> |
|
|
|
<el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址"> |
|
|
|
<template #prefix>http://</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-aside> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.asideBox{ |
|
|
|
height: calc(100vh - 40px); |
|
|
|
width: 300px; |
|
|
|
overflow-y : auto; |
|
|
|
.form_tabs{ |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
.shoushi{ |
|
|
|
cursor:pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.mainBox{ |
|
|
|
border-left: 1px solid #ECECEC; |
|
|
|
border-right: 1px solid #ECECEC; |
|
|
|
padding: 0; |
|
|
|
overflow-y : auto; |
|
|
|
.table_box{ |
|
|
|
background: #fff; |
|
|
|
border: 1px dashed #999; |
|
|
|
margin: 10px; |
|
|
|
height: calc(100vh - 100px); |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
position: relative; |
|
|
|
.table-tip{ |
|
|
|
color: #999; |
|
|
|
padding: 30px 0; |
|
|
|
line-height: 22px; |
|
|
|
} |
|
|
|
.operateButArea{ |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top:15px; |
|
|
|
.operatLeft{ |
|
|
|
padding-bottom: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.main_table{ |
|
|
|
padding: 10px 20px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.cell{ |
|
|
|
min-width:120px; |
|
|
|
} |
|
|
|
.field_close{ |
|
|
|
i{ |
|
|
|
display: none; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.field_close:hover{ |
|
|
|
i{ |
|
|
|
display: inline; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.tipBox{ |
|
|
|
border: 1px dotted #ddd; |
|
|
|
padding: 3px 5px; |
|
|
|
border-radius: 5px; |
|
|
|
color: #999; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
