ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/pageList.vue

<!--
@ 作者: 秦东
@ 时间: 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,
        title: [],
      },
    },
    card: {
      status: false,
      isClick: false,
      form: {
        sort: 1,
        sortWord: "",
        imgWork: "",
        imgWidth: 50,
        imgHeight: 50,
        imgBorderRadius: 5,
        imgPadding: 2,
        titleWork: "",
        describe: "",
        ranks: 3,
        title: [],
      },
    },
    date: {
      status: false,
      isClick: false,
      form: {
        startTime: "",
        endTime: "",
        dayType: 1,
        title: [],
      },
    },
    time: {
      status: false,
      isClick: false,
      form: {
        sortWord: "",
        sort: 1,
        title: [],
      },
    },
    gantt: {
      status: false,
      isClick: false,
      form: {
        startTime: "",
        endTime: "",
        dayType: 2,
        sortWord: "",
        sort: 1,
        title: [],
      },
    },
    map: {
      status: false,
      isClick: false,
      form: {
        mapWord: "",
        sortWord: "",
        sort: 1,
        title: [],
      },
    },
  },
});

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.formKey);
  });
});

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) => {
  // console.log("获取数据表字段数据-----------》",val)
  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); //删除列表中已经存在的字段
            }
          });
        });
      }
    }
  }
  console.log("state.tableData.columns", state.tableData.columns);
};

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 = 15; // 根据需求定义一个字体的标尺
  // 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 != "" &&
      data.data.listjson != "null"
    ) {
      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;
      if (stateData.view && stateData.view != null && stateData.view != "") {
        if (
          stateData.view.card &&
          stateData.view.card != null &&
          stateData.view.card != ""
        ) {
          state.view = stateData.view;
        } else {
          state.view = stateData.view;
          state.view.card = {
            status: false,
            isClick: false,
            form: {
              sort: 1,
              sortWord: "",
              imgWork: "",
              imgWidth: 50,
              imgHeight: 50,
              imgBorderRadius: 5,
              imgPadding: 2,
              titleWork: "",
              describe: "",
              ranks: 3,
              title: [],
            },
          };
        }
      }

      // 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;
  });
};

const showCollapse = () => {};
// 弹窗确认
const dialogConfirm = (editVal: string) => {
  // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
  try {
    if (typeof drawer.callback === "function") {
      // callback
      const newObj =
        drawer.codeType === "json" ? string2json(editVal) : stringToObj(editVal);
      drawer.callback(newObj);
    } else {
      switch (drawer.type) {
        case "css":
          // 表单属性－编辑表单样式
          if (!state.value.formData.config) {
            state.value.formData.config = {};
          }
          state.value.formData.config.style = editVal;
          break;
        case "dict":
          state.value.formDict = string2json(editVal);
          break;
        case "beforeRequest":
        case "beforeSubmit":
        case "afterResponse":
        case "afterSubmit":
        case "closeSubmit":
        case "change":
          if (!state.value.formData.events) {
            state.value.formData.events = {};
          }
          state.value.formData.events[drawer.type] = stringToObj(editVal);
          break;
        default:
          state.value.formData = stringToObj(editVal);
      }
    }
    dialogCancel();
  } catch (res) {
    // console.log(res.message)
    //ElMessage.error(res.message)
  }
};
</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>
            {{ state.view }}
            <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.title"
                        multiple
                        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-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="card"
                :class="state.view.card && state.view.card.status ? 'isTrueItem' : ''"
                :disabled="!state.view.card.status"
              >
                <template #title>
                  <div class="collapse-title">
                    <div>
                      <i class="fa fa-id-card-o"></i>
                      <el-text>卡片视图</el-text>
                    </div>
                    <el-switch
                      class="openOfClose"
                      v-model="state.view.card.status"
                      :disabled="isCardTrue"
                      @click.stop="showCollapse"
                    />
                  </div>
                </template>
                <div>
                  <el-form
                    label-position="top"
                    label-width="auto"
                    :model="state.view.card.form"
                    style="max-width: 600px"
                  >
                    <el-form-item label="标题字段">
                      <el-select
                        v-model="state.view.card.form.title"
                        multiple
                        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-select
                        v-model="state.view.card.form.imgWork"
                        placeholder="请选择图片字段"
                      >
                        <el-option
                          v-for="item in cardKeyWords"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="图片宽度与高度">
                      <el-input
                        v-model="state.view.card.form.imgWidth"
                        placeholder="请输入图片宽度"
                      >
                        <template #prepend>宽度</template>
                        <template #suffix>PX</template>
                      </el-input>
                      <el-input
                        v-model="state.view.card.form.imgHeight"
                        placeholder="请输入图片高度"
                        style="margin-top: 10px"
                      >
                        <template #prepend>高度</template>
                        <template #suffix>PX</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="图片圆角">
                      <el-input
                        v-model="state.view.card.form.imgBorderRadius"
                        placeholder="请输入图片圆角"
                        style="margin-top: 10px"
                      >
                        <template #prepend>圆角</template>
                        <template #suffix>PX</template>
                      </el-input>
                    </el-form-item>

                    <el-form-item label="图片边框缩进">
                      <el-input
                        v-model="state.view.card.form.imgPadding"
                        placeholder="请输入图片边框缩进"
                        style="margin-top: 10px"
                      >
                        <template #prepend>缩进</template>
                        <template #suffix>PX</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="卡片标题">
                      <el-select
                        v-model="state.view.card.form.titleWork"
                        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-select
                        v-model="state.view.card.form.describe"
                        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-input
                        v-model="state.view.card.form.ranks"
                        placeholder="请输入每行几列"
                        style="margin-top: 10px"
                      >
                        <template #suffix>列</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="排序字段">
                      <el-select
                        v-model="state.view.card.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.card.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 label="标题字段">
                      <el-select
                        v-model="state.view.date.form.title"
                        multiple
                        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>
                      <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.title"
                        multiple
                        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-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.title"
                        multiple
                        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-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.title"
                        multiple
                        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-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"
        :viewPage="stateList.view"
        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>