You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1500 lines
42 KiB
1500 lines
42 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-18 11:32:14
|
|
@ 备注: 自定义表单列表
|
|
-->
|
|
<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,gainListTableField } 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/pageListHeadTools.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({
|
|
formKey:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
formVersion:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
tabsActive:{
|
|
type:Number,
|
|
default:1
|
|
},
|
|
state:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
});
|
|
|
|
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)
|
|
}
|
|
});
|
|
|
|
const formTableActive = ref(1)
|
|
const pageLoading = ref(false)
|
|
//自定义列表结构
|
|
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.formKey.toString() || '',
|
|
formList: [], // 所有可选表单数据源
|
|
name: '',
|
|
treeData: {}, // 左侧树相关
|
|
previewVisible: false,
|
|
tabsName: 'second',
|
|
formFieldList: [], // 表单数据源所有可选字段
|
|
formApi:{
|
|
type:"1",
|
|
addApiUrl:"",
|
|
editApiUrl:"",
|
|
delApiUrl:"",
|
|
lookApiUrl:""
|
|
},
|
|
dict: {},
|
|
refreshTable: true,
|
|
view:{
|
|
list:{
|
|
status:true,
|
|
isClick:false,
|
|
form:{
|
|
sortWord:"",
|
|
sort:1
|
|
}
|
|
},
|
|
date:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:1
|
|
}
|
|
}
|
|
,
|
|
time:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
sortWord:"",
|
|
sort:1
|
|
}
|
|
}
|
|
,
|
|
gantt:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
startTime:"",
|
|
endTime:"",
|
|
dayType:2,
|
|
sortWord:"",
|
|
sort:1
|
|
}
|
|
}
|
|
,
|
|
map:{
|
|
status:false,
|
|
isClick:false,
|
|
form:{
|
|
mapWord:"",
|
|
sortWord:"",
|
|
sort:1
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
const kaif = (id: number, callback?: (list: any) => void) => {
|
|
// const content = stringToObj(props.state.formData)
|
|
console.log('获取当前数据下所有字段',statePro.value.formData)
|
|
filterFiled(statePro.value.formData)
|
|
callback && callback(statePro.value.formData.list)
|
|
|
|
console.log('获取当前数据下所有字段--->',state.formFieldList)
|
|
}
|
|
const filterFiled = (obj: any) => {
|
|
obj?.list.forEach((item: FormList) => {
|
|
if (item.type === 'grid' || item.type === 'tabs') {
|
|
item.columns.forEach((col: FormList) => {
|
|
filterFiled(col)
|
|
})
|
|
} else if (['card', 'div'].includes(item.type)) {
|
|
filterFiled(item)
|
|
} else if (!excludeType.includes(item.type) && item.name) {
|
|
state.formFieldList.push({
|
|
prop: item.name,
|
|
label: item.formItem?.label,
|
|
help: item.config.help || ''
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const excludeType = [
|
|
'txt',
|
|
'title',
|
|
'table',
|
|
'component',
|
|
'upload',
|
|
'button',
|
|
'tinymce',
|
|
'inputSlot',
|
|
'flex'
|
|
]
|
|
|
|
const powerUnitAry = ref<any>({
|
|
nodeKey:"",
|
|
recUnitAry:{
|
|
masterUnitList:[],
|
|
sunUnitList:[],
|
|
unitAllKey:[],
|
|
unitAllState:[]
|
|
}
|
|
})
|
|
const formTableField = reactive<formTableField>({})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-13 08:24:54
|
|
@ 功能: 解析表单
|
|
*/
|
|
const jieForm = () => {
|
|
// analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
|
|
// .then((data)=>{
|
|
// if(data.code == 0){
|
|
// powerUnitAry.value = data.data
|
|
// }
|
|
// })
|
|
if(props.formKey != ""){
|
|
gainFormTableField({id:props.formKey.toString()})
|
|
.then((data)=>{
|
|
console.log('解析表单--->',data)
|
|
formTableField.masterTable=data.data.masterTable
|
|
formTableField.sunTable=data.data.sunTable
|
|
})
|
|
}
|
|
|
|
}
|
|
const handleSelectionChange = (val: User[]) => {
|
|
console.log('表单选中--->',val)
|
|
}
|
|
// watch(()=>statePro.value,()=>{
|
|
// jieForm()
|
|
// },
|
|
// {
|
|
// deep: true
|
|
// })
|
|
watch(()=>props.tabsActive,(val:number)=>{
|
|
if(val == 3){
|
|
jieForm();
|
|
getListInfo();
|
|
}
|
|
})
|
|
onMounted(()=>{
|
|
jieForm();
|
|
nextTick(() => {
|
|
columnDrop()
|
|
getListInfo();
|
|
gainFormTableKeyWord(props.appPageKey.toString())
|
|
})
|
|
})
|
|
|
|
const allKeyWords = ref<any[]>([])
|
|
const timeKeyWords = ref<any[]>([])
|
|
const mapKeyWords = ref<any[]>([])
|
|
const isMapTrue = ref(true)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-06 10:44:54
|
|
@ 功能: 获取数据表字段数据
|
|
*/
|
|
const gainFormTableKeyWord = (val:string) => {
|
|
gainListTableField({id:val.toString()})
|
|
.then((data) =>{
|
|
console.log("获取数据表字段数据",data)
|
|
allKeyWords.value = data.data.allKeyWords
|
|
timeKeyWords.value = data.data.timeKeyWords
|
|
mapKeyWords.value = data.data.mapKeyWords
|
|
isMapTrue.value = !data.data.isMap
|
|
})
|
|
}
|
|
|
|
|
|
const setUpFieldInfo = ref<tableButton>()
|
|
const setUpFieldIsOpen= ref(false)
|
|
|
|
const tableAttrBut = ref<InstanceType<typeof ElTable>>()
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-25 11:51:46
|
|
@ 功能: 设置字段属性
|
|
*/
|
|
const setUpField = (val:any) =>{
|
|
console.log("设置字段属性-->",val)
|
|
setUpFieldInfo.value = val
|
|
|
|
setUpFieldIsOpen.value = true
|
|
|
|
console.log("设置字段属性-1->",setUpFieldIsOpen)
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-27 09:17:15
|
|
@ 功能: 设置功能按钮
|
|
*/
|
|
const listButtonIsShow = ref(false)
|
|
const setUpFieldBut = () => {
|
|
// console.log("设置字段属性-->")
|
|
listButtonIsShow.value = true
|
|
}
|
|
//功能按钮
|
|
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-03-25 14:58:22
|
|
@ 功能: 功能字段
|
|
*/
|
|
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 = [];
|
|
}
|
|
}
|
|
}
|
|
const zhuDaunIsTrue = ref(false);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-25 16:36:38
|
|
@ 功能: 列表字段处理
|
|
*/
|
|
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) //删除列表中已经存在的字段
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const container = ref()
|
|
//拖动字段排序
|
|
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() // 拖完后拖不到了，再执行一下
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const tableFieldList = ref<InstanceType<typeof ElTable>>()
|
|
const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>()
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-27 08:27:22
|
|
@ 功能: 删除表头列表字段
|
|
*/
|
|
const delCol = (val:any) => {
|
|
let delInfo = []
|
|
let delInfoBut = []
|
|
if(state.tableData.columns.length > 0) {
|
|
|
|
state.tableData.columns.forEach((item: any, index: number) => {
|
|
if (item.id === val.id) {
|
|
state.tableData.columns.splice(index, 1)
|
|
if(item.attribute == "-"){
|
|
delInfoBut.push(item)
|
|
}else{
|
|
delInfo.push(item)
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
// tableFieldList.value!.toggleRowSelection(delInfo, true)
|
|
console.log("delInfo",delInfo)
|
|
// tableFieldList.value!.clearSelection()
|
|
}else{
|
|
tableFieldList.value!.clearSelection()
|
|
tableFieldAttrBut.value!.clearSelection()
|
|
}
|
|
if(delInfo.length > 0){
|
|
delInfo.forEach((item:any)=>{
|
|
tableFieldList.value!.toggleRowSelection(item, false)
|
|
})
|
|
}
|
|
if(delInfoBut.length > 0){
|
|
delInfoBut.forEach((item:any)=>{
|
|
tableFieldAttrBut.value!.toggleRowSelection(item, false)
|
|
})
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-27 10:13:34
|
|
@ 功能: 更新列表记录操作按钮
|
|
*/
|
|
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-03-28 15:00:12
|
|
@ 功能: 处理查询条件
|
|
*/
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// 定义自定义表头
|
|
const readerColumn = (column:any) => {
|
|
// console.log(column)
|
|
let labelLong = column.label.length // 表头label长度
|
|
if(column.label.length < 3) {
|
|
labelLong = 3
|
|
}
|
|
let size = 30 // 根据需求定义一个字体的标尺
|
|
// column.minWidth = labelLong * size
|
|
//@ts-ignore
|
|
return labelLong * size
|
|
}
|
|
|
|
const adaptiveWidth = (colName: any) =>{
|
|
if (!colName) {
|
|
return
|
|
}
|
|
colName += ''
|
|
const english = /\w+/
|
|
let colWidth = 0
|
|
for (const char of colName) {
|
|
if (english.test(char)) {
|
|
colWidth += 30
|
|
} else {
|
|
colWidth += 30
|
|
}
|
|
}
|
|
return colWidth
|
|
}
|
|
const codeIsShow = ref(false) //生成代码
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-29 11:12:26
|
|
@ 功能: 列表头部按钮操作
|
|
*/
|
|
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-03-29 14:42:39
|
|
@ 功能: 关闭预览
|
|
*/
|
|
const handlePreviewClose = () => {
|
|
state.previewVisible = false
|
|
}
|
|
const drawer = reactive({
|
|
visible: false,
|
|
title: '',
|
|
direction: 'ltr',
|
|
content: '',
|
|
codeType: ''
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-29 14:08:49
|
|
@ 功能: 数据格式处理
|
|
*/
|
|
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
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-03-29 11:02:51
|
|
@ 功能: 清空数据
|
|
*/
|
|
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-03-29 14:58:52
|
|
@ 功能: 添加自定义表单列表设定
|
|
*/
|
|
const saveFormListData = () => {
|
|
const { type ,addApiUrl ,editApiUrl,delApiUrl,lookApiUrl } = state.formApi
|
|
if(!props.formKey || props.formKey == "" || props.formKey == null || props.formKey == 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.formKey.toString()
|
|
}
|
|
console.log("添加自定义表单列表设定",params)
|
|
editCustomerFormList(params)
|
|
.then((data)=>{
|
|
console.log("添加自定义表单列表设定",data)
|
|
ElMessage.success(data.msg)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-01 08:41:31
|
|
@ 功能: 获取列表内容
|
|
*/
|
|
const getListInfo = () => {
|
|
console.log("获取列表内容1111",props.formKey)
|
|
gainFormListCont({id:props.formKey.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
|
|
state.view = stateData.view
|
|
|
|
console.log("获取列表内容--1-->",stateData.view)
|
|
console.log("获取列表内容--2-->",state.view)
|
|
}
|
|
|
|
|
|
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)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
// // let delInfo = []
|
|
// // let delInfoBut = []
|
|
|
|
// // state.tableData.columns.forEach((item: any) => {
|
|
// // if(item.fieldClass != "-"){
|
|
// // delInfo.push(item)
|
|
// // }else{
|
|
// // delInfoBut.push(item)
|
|
// // }
|
|
// // // tableFieldList.value!.toggleRowSelection(item, true)
|
|
// // // if
|
|
// // // tableFieldAttrBut.value!.toggleRowSelection(item, true)
|
|
// // })
|
|
// // if(delInfo.length > 0){
|
|
// // delInfo.forEach((item:any)=>{
|
|
// // tableFieldList.value!.toggleRowSelection(item, true)
|
|
// // })
|
|
// // }
|
|
// // if(delInfoBut.length > 0){
|
|
// // delInfoBut.forEach((item:any)=>{
|
|
// // 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
|
|
})
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<div class="design-containers design-table" v-loading="pageLoading">
|
|
<!-- <div class="components-list">
|
|
<el-divider content-position="left">表格列字段</el-divider>
|
|
<el-table
|
|
ref="multipleTableRef"
|
|
:data="powerUnitAry.recUnitAry.masterUnitList"
|
|
style="width: 100%"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="30" />
|
|
<el-table-column label="栏目">
|
|
<template #default="scope">{{ scope.row.name }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div> -->
|
|
<div class="main-body">
|
|
<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-button-group class="ml-4">
|
|
<el-tooltip
|
|
v-if="state.config.searchFormIsShow"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="折叠查询表单"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" @click="state.config.searchIsShow=!state.config.searchIsShow" class="fa fa-search" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="state.view.list.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="列表视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-table" :color="state.view.list.isClick?'#a0cfff':''" @click="tabsView(state.view.list)" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="state.view.date.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="日历视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-calendar" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="state.view.time.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="时间轴"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-clock-o" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="state.view.gantt.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="甘特图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-bar-chart" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
v-if="state.view.map.status"
|
|
class="box-item"
|
|
effect="dark"
|
|
content="地图视图"
|
|
placement="top"
|
|
>
|
|
<el-button size="small" class="fa fa-map-signs" />
|
|
</el-tooltip>
|
|
|
|
</el-button-group>
|
|
</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>
|
|
</div>
|
|
<div class="sidebar-tools">
|
|
<el-tabs ref="multipleTableRef" v-model="formTableActive" class="form_tabs" @tab-click="handleClick">
|
|
<el-tab-pane label="字段设置" :name="1">
|
|
<el-divider content-position="left">功能字段</el-divider>
|
|
<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)"><Setting /></el-icon>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-divider content-position="left">列表字段</el-divider>
|
|
<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-column fixed="right" label="设置" width="55" align="center">
|
|
<template #default="scope">
|
|
<el-icon title="设置" @click="setUpField(scope.row)"><Setting /></el-icon>
|
|
</template>
|
|
</el-table-column> -->
|
|
</el-table>
|
|
<!-- <el-divider content-position="left">查询条件</el-divider> -->
|
|
</el-tab-pane>
|
|
<el-tab-pane label="列表设置" :name="2">
|
|
<el-divider content-position="left">开启视图</el-divider>
|
|
<div class="demo_collapse">
|
|
<el-collapse v-value="activeName" @change="handleChange">
|
|
<el-collapse-item name="list" :class="state.view.list.status?'isTrueItem':''" :disabled="!state.view.list.status">
|
|
<template #title>
|
|
<div class="collapse-title">
|
|
<div>
|
|
<i class="fa fa-table"></i>
|
|
<el-text>列表视图</el-text>
|
|
</div>
|
|
<el-switch v-if="1==0" class="openOfClose" v-model="state.view.list.status" @click.stop="showCollapse" />
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-form
|
|
label-position="top"
|
|
label-width="auto"
|
|
:model="state.view.list.form"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item label="排序字段">
|
|
<el-select v-model="state.view.list.form.sortWord" placeholder="请选择排序字段">
|
|
<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序方式">
|
|
<el-radio-group v-model="state.view.list.form.sort">
|
|
<el-radio :label="1">降序</el-radio>
|
|
<el-radio :label="2">升序</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="Consistency" name="date" :class="state.view.date.status?'isTrueItem':''" :disabled="!state.view.date.status">
|
|
<template #title>
|
|
<div class="collapse-title">
|
|
<div>
|
|
<i class="fa fa-calendar"></i>
|
|
<el-text>日历视图</el-text>
|
|
</div>
|
|
<el-switch class="openOfClose" v-model="state.view.date.status" @click.stop="showCollapse" />
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-form
|
|
label-position="top"
|
|
label-width="auto"
|
|
:model="state.view.date.form"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item >
|
|
<span slot="label">
|
|
时间跨度
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
content="假如一个任务今天开始，明天结束。日历列表中用区间日期展示这一条信息。"
|
|
placement="top"
|
|
>
|
|
<i class="fa fa-question-circle-o"></i>
|
|
</el-tooltip>
|
|
</span>
|
|
<el-select v-model="state.view.date.form.startTime" clearable placeholder="请选择开始时间">
|
|
<template #prefix>从</template>
|
|
<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<el-select v-model="state.view.date.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
|
|
<template #prefix>至</template>
|
|
<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="默认展示">
|
|
<el-select v-model="state.view.date.form.dayType" clearable placeholder="请选择展示方式">
|
|
<el-option label="月" :value="1" />
|
|
<el-option label="周" :value="2" />
|
|
<el-option label="日" :value="3" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
</el-collapse-item>
|
|
|
|
|
|
<el-collapse-item title="Consistency" name="time" :class="state.view.time.status?'isTrueItem':''" :disabled="!state.view.time.status">
|
|
<template #title>
|
|
<div class="collapse-title">
|
|
<div>
|
|
<i class="fa fa-clock-o"></i>
|
|
<el-text>时间轴</el-text>
|
|
</div>
|
|
<el-switch class="openOfClose" v-model="state.view.time.status" @click.stop="showCollapse" />
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-form
|
|
label-position="top"
|
|
label-width="auto"
|
|
:model="state.view.time.form"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item label="时间轴字段">
|
|
<el-select v-model="state.view.time.form.sortWord" placeholder="请选择时间轴段">
|
|
<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序方式">
|
|
<el-radio-group v-model="state.view.time.form.sort">
|
|
<el-radio :label="1">降序</el-radio>
|
|
<el-radio :label="2">升序</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="Consistency" name="gantt" :class="state.view.gantt.status?'isTrueItem':''" :disabled="!state.view.gantt.status">
|
|
<template #title>
|
|
<div class="collapse-title">
|
|
<div>
|
|
<i class="fa fa-bar-chart fa-rotate-0 "></i>
|
|
<el-text>甘特图</el-text>
|
|
</div>
|
|
<el-switch class="openOfClose" v-model="state.view.gantt.status" @click.stop="showCollapse" />
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-form
|
|
label-position="top"
|
|
label-width="auto"
|
|
:model="state.view.gantt.form"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item label="时间设置">
|
|
<el-select v-model="state.view.gantt.form.startTime" clearable placeholder="请选择开始时间">
|
|
<template #prefix>开始时间</template>
|
|
<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<el-select v-model="state.view.gantt.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
|
|
<template #prefix>结束时间</template>
|
|
<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="默认时间刻度">
|
|
<el-select v-model="state.view.gantt.form.dayType" clearable placeholder="请选择展示方式">
|
|
<el-option label="时" :value="1" />
|
|
<el-option label="日" :value="2" />
|
|
<el-option label="周" :value="3" />
|
|
<el-option label="月" :value="4" />
|
|
<el-option label="季" :value="5" />
|
|
<el-option label="年" :value="6" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序字段">
|
|
<el-select v-model="state.view.gantt.form.sortWord" placeholder="请选择时间轴段">
|
|
<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序方式">
|
|
<el-radio-group v-model="state.view.gantt.form.sort">
|
|
<el-radio :label="1">降序</el-radio>
|
|
<el-radio :label="2">升序</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="Consistency" name="map" :class="state.view.map.status?'isTrueItem':''" :disabled="!state.view.map.status">
|
|
<template #title>
|
|
<div class="collapse-title">
|
|
<div>
|
|
<i class="fa fa-map-signs"></i>
|
|
<el-text>地图视图</el-text>
|
|
</div>
|
|
<el-switch class="openOfClose" v-model="state.view.map.status" :disabled="isMapTrue" @click.stop="showCollapse" />
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-form
|
|
label-position="top"
|
|
label-width="auto"
|
|
:model="state.view.map.form"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item label="位置字段">
|
|
<el-select v-model="state.view.map.form.mapWord" placeholder="请选择位置字段">
|
|
<el-option v-for="item in mapKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序字段">
|
|
<el-select v-model="state.view.map.form.sortWord" placeholder="请选择时间轴段">
|
|
<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="排序方式">
|
|
<el-radio-group v-model="state.view.map.form.sort">
|
|
<el-radio :label="1">降序</el-radio>
|
|
<el-radio :label="2">升序</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
</el-collapse-item>
|
|
|
|
|
|
|
|
</el-collapse>
|
|
</div>
|
|
<el-divider content-position="left">功能按钮</el-divider>
|
|
<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>
|
|
<el-divider content-position="left">基本功能设置</el-divider>
|
|
<el-form :model="state.config" label-width="auto" style="width: 96%; margin-left:2%;">
|
|
<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>
|
|
<el-divider content-position="left">数据处理事件</el-divider>
|
|
<el-form :model="state.formApi" label-width="auto" style="width: 96%; margin-left:2%;">
|
|
<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>
|
|
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- {{props.formKey}}
|
|
<br>
|
|
{{props.formVersion}}
|
|
<br>
|
|
{{formTableField}} -->
|
|
</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"
|
|
v-if="state.previewVisible"
|
|
/>
|
|
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.design-containers{
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
margin: 0;
|
|
.components-list{
|
|
width: 200px;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
height: calc(100vh - 40px);
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
border-right: 1px solid #e0e0e0;
|
|
}
|
|
}
|
|
.form_tabs > .el-tabs__content{
|
|
padding: 0;
|
|
}
|
|
.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;
|
|
}
|
|
.demo_collapse{
|
|
padding: 0 10px;
|
|
|
|
:deep .el-collapse{
|
|
border: 0px;
|
|
|
|
}
|
|
:deep .el-collapse-item__header {
|
|
padding-left:5px;
|
|
border: 1px solid #eeeeee;
|
|
border-radius:10px;
|
|
|
|
}
|
|
:deep .el-collapse-item{
|
|
border-radius: 10px 10px;
|
|
background-color: rgb(245, 247, 250) !important;
|
|
margin-bottom: 10px;
|
|
.el-collapse-item__wrap{
|
|
background-color: rgb(245, 247, 250) !important;
|
|
}
|
|
|
|
.collapse-title{
|
|
i{
|
|
padding:0 5px 0 0;
|
|
}
|
|
}
|
|
.openOfClose{
|
|
margin:9px 9px 0 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
:deep .el-collapse-item:last-child{
|
|
margin-bottom:0;
|
|
}
|
|
|
|
:deep .el-collapse-item__content {
|
|
|
|
padding-left: 10px;
|
|
padding-bottom:0px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
:deep .collapse-title {
|
|
flex: 1 0 90%;
|
|
order: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.el-collapse-item__header {
|
|
flex: 1 0 auto;
|
|
order: -1;
|
|
}
|
|
}
|
|
}
|
|
.isTrueItem{
|
|
:deep .el-collapse-item__header{
|
|
color:#79bbff;
|
|
background-color: #c6e2ff;
|
|
}
|
|
.el-text{
|
|
color:#337ecc;
|
|
}
|
|
}
|
|
</style>
|
|
|