<!--
@ 作者: 秦东
@ 时间: 2024-03-29 14:21:27
@ 备注: 自定义表单通用列表
-->
<script lang="ts" setup>
import {
  json2string,
  objToStringify,
  string2json,
  stringToObj,
} from "@/utils/DesignForm/form";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import { useDesignFormStore } from "@/store/DesignForm/designForm";
import {
  attrButton,
  FormPageList,
  FormPageConfig,
  viewPageType,
  tableButton,
} from "@/api/DesignForm/tableButton";
import {
  inputUnit,
  timeUnit,
  choiceUnit,
  switchUnit,
  orgUnit,
  checkboxUnit,
  orgDeptUnit,
} from "@/api/DesignForm/fieldUnit";
import type { FormInstance, FormRules,ElButton } from "element-plus";
import { gainFormPageListCont } from "@/api/DesignForm/requestapi";
import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
import request from "@/utils/request";
import html2canvas from "html2canvas";
import JSZip, { forEach } from "jszip";
import { ElLoading, ElMessage, ElNotification } from "element-plus";
import { softDeletion, retractRunWorkFlow, recalSendMsg } from "@/api/taskapi/management";
import { echatsViews } from "@/api/DesignForm/types";
import { formatNumber } from "@/api/DesignForm/utils";
import { formHasPower } from "@/directive/permission/button";
import { Ref } from "vue";
import {printHtmlPage} from '../printHtmlRender.ts'
//引入组件
import FormPageCont from "@/components/DesignForm/tableListPage/formPageCont.vue";
import TableFlow from "@/views/sysworkflow/lowcodepage/pageFlow/tableFlow.vue";
import TimeAxisPage from "@/components/DesignForm/app/timeAxis.vue";
import CardPage from "@/components/DesignForm/app/cardPage.vue";
import GanttPage from "@/components/DesignForm/app/gannttPage.vue";
import MapPage from "@/components/DesignForm/app/mapPage.vue";
import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue";
import SeeContChart from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/seeContChart.vue";
import {getPrintTemplate} from '@/api/DesignForm/requestapi'
import { display } from "html2canvas/dist/types/css/property-descriptors/display";

const props = withDefaults(
  defineProps<{
    data: FormPageList;
    searchData?: attrButton[];
    config: FormPageConfig;
    appKey?: string;
    formId?: string;
    signCode?: string;
    beforeRequest?: (params: any, rout: any) => any;
    afterResponse?: (result: any) => any | string;
    beforeDelete?: (params: any, route: any) => any;
    showPage?: boolean;
    requestUrl?: string; // 请求的api
    deleteUrl?: string; // 删除的api
    dict?: { [key: string | number]: string | number };
    fixedBottomScroll?: boolean;
    query?: { [key: string]: any }; // 一些附加的请求参数
    autoLoad?: boolean; // 初始时自动请求加载数据
    delKey?: string; // 删除标识
    lookPageIsShow?: boolean;
    versionid?: string;
    formKey?:string;
    versiontitle?: string;
    viewPage?: viewPageType;
    formBasicConfig?: any;
    fieldsDetailList?: any;
    orgAndManTree?: any;
    echatsViews: echatsViews;
  }>(),
  {
    showPage: true,
    data: () => {
      return { columns: [], controlBtn: [], operateBtn: [], config: {} };
    },
    searchData: () => {
      return [];
    },
    config: () => {
      return {};
    },
    dict: () => {
      return {};
    },
    appKey: () => {
      return "";
    },
    formId: () => {
      return "";
    },
    signCode: () => {
      return "";
    },
    versionid: () => {
      return "";
    },
    versiontitle: () => {
      return "";
    },
    fixedBottomScroll: true,
    autoLoad: true,
    delKey: "id",
    query: () => {
      return {};
    },
    lookPageIsShow: () => {
      return false;
    },
    viewPage: () => {
      return [];
    },
    formBasicConfig: () => {
      return {};
    },
    fieldsDetailList: () => {
      return {};
    },
    orgAndManTree: () => {
      return {};
    },
  }
);

const echatsViewsdf = computed({
  get() {
    return props.echatsViews;
  },
  set(newVal: any) {},
});
const emits = defineEmits<{
  (e: "selectionChange", row: any): void;
  (e: "btnClick", btn: any, row?: any): void; // 列表上面及表格列表里添加删除按钮事件
  (e: "optionsValue5Get5", data: any, fieldName: any): void;
}>();
const operState = ref<number>(1); //操作状态	1：新增；2：重新发起；3：申请修改；4：提交审批;5:普通表单修改
const idList = ref<string[]>([]);
const designStore = useDesignFormStore();
const route = useRoute();
const router = useRouter();
const tableDataList = ref([]); // 表格行数据
const currentAsfTableDataList = ref([]); //当前点击的关联表单数据
const openTaskDrawer = ref(false); //新增数据

const state = reactive({
  loading: false,
  currentPage: 1,
  pageSize: props.config?.pageSize || 2,
  total: 0,
  selectionChecked: [],
  dict: {}, // 接口返回的
  searchFormDown: false,
  treeValue: {}, // 侧栏树选中的值
  tableScrollMargin: 0,
  columnsCheck: designStore.getColumnsCheck(route.path),
  currentNodeKey: "",
});

const viewType = ref(1);
const viewLayout = ref<any>();
/**
@ 作者: 秦东
@ 时间: 2024-03-28 16:03:12
@ 功能: 判断类型
*/
const unitIsShow = (val: tableButton, unitName: string) => {
  // val.pattern
  switch (val.fieldClass) {
    case "id": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "masters_key": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "creater": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "creater_time": //自定义表单保留字
      return timeUnit.includes(unitName);
      break;
    case "edit_time": //自定义表单保留字
      return timeUnit.includes(unitName);
      break;
    case "flow_id": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "baidumap": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "input": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "radio": //自定义表单保留字
      return choiceUnit.includes(unitName);
      break;
    case "switch": //自定义表单保留字
      return switchUnit.includes(unitName);
      break;
    case "orgCentent": //自定义表单保留字
      return orgUnit.includes(unitName);
      break;
    case "varchar": //自定义表单保留字
      return inputUnit.includes(unitName);
      break;
    case "checkbox":
      return checkboxUnit.includes(unitName);
      break;
    case "deptOrg":
      return orgDeptUnit.includes(unitName);
      break;
    default:
      if (val.fieldClass != "datePicker" && val.fieldClass != "timePicker") {
        return inputUnit.includes(unitName);
      }
      break;
  }
};

/**
@ 作者: 秦东
@ 时间: 2024-03-28 13:17:46
@ 功能: 重置表单
*/
const ruleSearchForm = ref();
const resetFields = (formEl: FormInstance | undefined) => {
  // formEl.resetFields()
  // console.log("formEl",formEl,formEl.resetFields())
  // if (!formEl) return
  // formEl.resetFields()
  if (props.searchData && props.searchData.length > 0) {
    props.searchData.forEach((item: any) => {
      item.value = "";
    });
  }
};

//20250117 李文轩 二维码表格
const qrCodesPrintDialogFlag = ref(false);
let tableRefs = reactive({});
const tablesData = ref({});
function getDetailQrCodes(val: any) {
  return request({
    url: "/javasys/lowCode/QrCode/getDetailQrCodes",
    method: "post",
    data: {
      cfid: props.formId,
      idArray: val,
      settings: props.formBasicConfig,
    },
  });
}

function modifyFieldsMap4(fieldsMap: any): Array<{ key: string; value: string }> {
  let result: Array<{ key: string; value: string }> = [];
  // 使用 Object.entries 获取键值对数组，保留原始顺序
  for (const [key, value] of Object.entries(fieldsMap)) {
    let parts = value.split("!@#@!");
    if (parts.length === 2) {
      result.push({ key: parts[0], value: parts[1] });
    } else {
      // 如果格式不符合，可进行错误处理，这里暂时不做处理，直接使用原属性名和属性值
      result.push({ key, value });
    }
  }
  return result;
}

// 定义两个响应式的布尔值来控制按钮的禁用状态
const isButton1Disabled = ref(false);
const isButton2Disabled = ref(false);

async function downloadTables() {
  isButton1Disabled.value = true;
  isButton2Disabled.value = true;
  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: "正在生成图片，请稍候...", // 添加的文字内容，可根据需要修改
  });
  //ElMessage('This is a message.')
  const zip = new JSZip();
  //console.log(tableRefs)
  for (const [tableKey, element] of Object.entries(tableRefs)) {
    try {
      const canvas = await html2canvas(element);
      const dataUrl = canvas.toDataURL("image/png");
      const byteString = atob(dataUrl.split(",")[1]);
      const mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);

      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }

      const blob = new Blob([ab], { type: mimeString });
      zip.file(`${props.formBasicConfig.formName}-${tableKey}.png`, blob);
    } catch (error) {
      console.error(`Error converting ${tableKey} to image:`, error);
    }
  }

  zip.generateAsync({ type: "blob" }).then(function (content) {
    const now = new Date();
    const formattedDate = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(
      2,
      "0"
    )}${String(now.getDate()).padStart(2, "0")}_${String(now.getHours()).padStart(
      2,
      "0"
    )}${String(now.getMinutes()).padStart(2, "0")}${String(now.getSeconds()).padStart(
      2,
      "0"
    )}`;
    const fileName = `${props.formBasicConfig.formName}-${formattedDate}.zip`;

    const link = document.createElement("a");
    link.href = URL.createObjectURL(content);
    link.download = fileName;
    loadingInstance.close();
    link.click();
    tableRefs = {};
    // 不管成功与否，最后都要恢复按钮的状态
    isButton1Disabled.value = false;
    isButton2Disabled.value = false;
  });
}
function closeQrDownload() {
  qrCodesPrintDialogFlag.value = false;
  tableRefs = {};
  //console.log(tableRefs)
}

let asfs: any[] = [];
let radios: any[] = [];
let checkboxs: any[] = [];
let switchs: any[] = [];
let selects: any[] = [];
let tables: any[] = [];
let dofs: any[] = []; //deptOrgAndOrgCententAndFounderArr

function getAsfs() {
  //setTimeout(() => {
  let dataList = ref({});
  dataList.value = props.fieldsDetailList;
  if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
    for (let i = 0; i < dataList.value.length; i++) {
      if (dataList.value[i].type == "associatedForms") {
        asfs.push(dataList.value[i]);
      } else if (dataList.value[i].type == "radio") {
        radios.push(dataList.value[i]);
      } else if (dataList.value[i].type == "checkbox") {
        checkboxs.push(dataList.value[i]);
      } else if (dataList.value[i].type == "switch") {
        switchs.push(dataList.value[i]);
      } else if (dataList.value[i].type == "select") {
        selects.push(dataList.value[i]);
      } else if (
        dataList.value[i].type == "deptOrg" ||
        dataList.value[i].type == "orgCentent" ||
        dataList.value[i].type == "founder"
      ) {
        //||dataList.value[i].type == "owner"拥有者,"expand-user"选择用户
        dofs.push(dataList.value[i]);
      } else if (
        dataList.value[i].type == "card" ||
        dataList.value[i].type == "flex" ||
        dataList.value[i].type == "div" ||
        dataList.value[i].type == "table"
      ) {
        if (dataList.value[i].type == "table") {
          tables.push(dataList.value[i]);
        }

        dataList.value[i].list.forEach((element: any) => {
          if (element.type == "associatedForms") {
            asfs.push(element);
          } else if (element.type == "radio") {
            radios.push(element);
          } else if (element.type == "checkbox") {
            checkboxs.push(element);
          } else if (element.type == "switch") {
            switchs.push(element);
          } else if (element.type == "select") {
            selects.push(element);
          } else if (
            element.type == "deptOrg" ||
            element.type == "orgCentent" ||
            element.type == "founder"
          ) {
            dofs.push(element);
          }
        });
      } else if (dataList.value[i].type == "grid") {
        let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));

        if (columns.length > 0) {
          for (let z = 0; z < columns.length; z++) {
            for (let x = 0; x < columns[z].list.length; x++) {
              let a = JSON.parse(JSON.stringify(columns[z].list[x]));

              if (a.type == "associatedForms") {
                asfs.push(a);
              } else if (a.type == "radio") {
                radios.push(a);
              } else if (a.type == "checkbox") {
                checkboxs.push(a);
              } else if (a.type == "switch") {
                switchs.push(a);
              } else if (a.type == "select") {
                selects.push(a);
              } else if (
                a.type == "deptOrg" ||
                a.type == "orgCentent" ||
                a.type == "founder"
              ) {
                dofs.push(a);
              }
            }
          }
        }
      } else if (dataList.value[i].type == "tabs") {
        //tabs标签页有可能再嵌套一层flex或者table
        let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
        if (columns.length > 0) {
          for (let z = 0; z < columns.length; z++) {
            for (let x = 0; x < columns[z].list.length; x++) {
              let a = JSON.parse(JSON.stringify(columns[z].list[x]));

              if (a.type == "associatedForms") {
                asfs.push(a);
              } else if (a.type == "radio") {
                radios.push(a);
              } else if (a.type == "checkbox") {
                checkboxs.push(a);
              } else if (a.type == "switch") {
                switchs.push(a);
              } else if (a.type == "select") {
                selects.push(a);
              } else if (
                a.type == "deptOrg" ||
                a.type == "orgCentent" ||
                a.type == "founder"
              ) {
                dofs.push(a);
              } else if (a.type == "flex" || a.type == "table") {
                if (a.type == "table") {
                  tables.push(dataList.value[i]);
                }

                if (a.list.length > 0) {
                  for (let m = 0; m < a.list.length; m++) {
                    let q = JSON.parse(JSON.stringify(a.list[m]));

                    if (q.type == "associatedForms") {
                      asfs.push(q);
                    } else if (q.type == "radio") {
                      radios.push(q);
                    } else if (q.type == "checkbox") {
                      checkboxs.push(q);
                    } else if (q.type == "switch") {
                      switchs.push(q);
                    } else if (q.type == "select") {
                      selects.push(q);
                    } else if (
                      q.type == "deptOrg" ||
                      q.type == "orgCentent" ||
                      q.type == "founder"
                    ) {
                      dofs.push(q);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //}, 500);
}

function convertStringToArray(str: string) {
  if (typeof str !== "string") {
    throw new Error("Input must be a string.");
  }
  if (str === "") {
    return [];
  }
  // 去除首尾的中括号
  str = str.slice(1, -1);
  if (str === "") {
    return [];
  }
  let parts = str.split(",");
  return parts.map((part) => parseFloat(part));
}

interface Tree {
  id?: string;
  label: string;
  disabled?: boolean;
  children?: Tree[];
  parentId?: string;
  [key: string]: any;
}
function getLabelById(id: string): string | undefined {
  //console.log(id)
  const treeNodes = props.orgAndManTree;

  const findLabel = (nodes: Tree[]): string | undefined => {
    for (const node of nodes) {
      // 检查当前节点是否匹配目标id
      if (node.id === id) {
        return node.label;
      }
      // 递归遍历子节点
      if (node.children?.length) {
        const found = findLabel(node.children);
        if (found) return found;
      }
    }
    return undefined;
  };

  return findLabel(treeNodes);
}
function isAllCharactersNumbers(str: string) {
  // 遍历字符串中的每个字符
  for (let i = 0; i < str.length; i++) {
    // 检查当前字符是否不是数字字符
    if (isNaN(parseInt(str[i], 10))) {
      return false;
    }
  }
  return true;
}

//liwenxuan 20250120 二维码 end

/**
@ 作者: 秦东
@ 时间: 2024-04-01 11:36:07
@ 功能: 功能按钮动作
*/
const setUpClick = (val: any, id: string) => {
  // console.log("功能按钮动作",val,"----id----->",props.versionid,"-----formId---->",props.versiontitle)
  if (val.key == "newAdd") {
    drawerWith.value = container.value?.clientWidth;
    openTaskDrawer.value = true;
  } else if (val.key === "export") {
    alert("请在非编辑模式操作");
  } else if (val.key === "import") {
    alert("请在非编辑模式操作");
  } else if (val.key == "showQrCode") {
    //liwenxuan 20250114 二维码打印弹窗 start
    //在此组装参数,以生成二维码图片
    let idArray = state.selectionChecked.map((item) => item.id);
    if (idArray.length > 0) {
      //console.log(props.formBasicConfig)

      if (props.formBasicConfig.qrCodeFlag == true) {
        if (props.formBasicConfig.qrCodeInside == true) {
          if (
            props.formBasicConfig.qrCodePrintStyle &&
            props.formBasicConfig.qrCodePrintStyle == "2" &&
            props.formBasicConfig.qrCodeShowFields.length == 0
          ) {
            alert("未配置表格展示字段");
            return;
          }
          const loadingInstance1 = ElLoading.service({
            fullscreen: true,
            text: "正在生成二维码，请稍候...", // 添加的文字内容，可根据需要修改
          });

          //请求数据
          let getDetailQrCodesData: any = {};
          let currentFieldsMapArrObj: any = {};
          getDetailQrCodes(idArray)
            .then(({ data }) => {
              getDetailQrCodesData = JSON.parse(JSON.stringify(data));
              if (
                props.formBasicConfig.qrCodePrintStyle &&
                props.formBasicConfig.qrCodePrintStyle == "2"
              ) {
                let asfQueryParams1: any[] = [];
                for (let key in getDetailQrCodesData) {
                  currentFieldsMapArrObj[key] = getDetailQrCodesData[key];
                  if (getDetailQrCodesData.hasOwnProperty(key)) {
                    let currentFieldsMap = getDetailQrCodesData[key].fieldsMap;
                    //console.log(currentFieldsMap)
                    // 遍历对象的属性
                    for (let attr_name in currentFieldsMap) {
                      if (currentFieldsMap.hasOwnProperty(attr_name)) {
                        //console.log("attr_name------"+attr_name)
                        //console.log(`属性名: ${attr_name}, 属性值: ${currentFieldsMap[attr_name]}`);
                        radios.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此单选,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            let optionsHasCurrentValue = false;
                            element.options.forEach((element1: any) => {
                              if (toConvertValue == element1.value) {
                                currentFieldsMap[attr_name] =
                                  currentFieldsMap[attr_name].split("!@#@!")[0] +
                                  "!@#@!" +
                                  element1.label;
                                optionsHasCurrentValue = true;
                              }
                            });
                            if (optionsHasCurrentValue == false) {
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                "";
                            }
                          }
                        });
                        selects.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此单选,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            let optionsHasCurrentValue = false;
                            element.options.forEach((element1: any) => {
                              if (toConvertValue == element1.value) {
                                currentFieldsMap[attr_name] =
                                  currentFieldsMap[attr_name].split("!@#@!")[0] +
                                  "!@#@!" +
                                  element1.label;
                                optionsHasCurrentValue = true;
                              }
                            });
                            if (optionsHasCurrentValue == false) {
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                "";
                            }
                          }
                        });
                        //console.log(dofs)
                        dofs.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此单选,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            //console.log(toConvertValue)
                            if (isAllCharactersNumbers(toConvertValue)) {
                              let orgName = getLabelById(toConvertValue);
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                orgName;
                            }
                          }
                        });
                        switchs.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此单选,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            if (toConvertValue == "0") {
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                "禁用";
                            } else {
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                "启用";
                            }
                          }
                        });
                        checkboxs.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此单选,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            let toConvertArr = convertStringToArray(toConvertValue);
                            let toAddStr = "";
                            if (toConvertArr.length > 0) {
                              toConvertArr.forEach((element1: any) => {
                                element.options.forEach((element2: any) => {
                                  if (element1 == element2.value) {
                                    toAddStr = toAddStr + element2.label + ",";
                                  }
                                });
                              });
                              toAddStr = toAddStr.slice(0, -1);
                              currentFieldsMap[attr_name] =
                                currentFieldsMap[attr_name].split("!@#@!")[0] +
                                "!@#@!" +
                                toAddStr;
                            }
                          }
                        });
                        asfs.forEach(function (element) {
                          if (attr_name == element.name) {
                            //表格属性中存在此关联表单,将其value根据options替换为可读值
                            let toConvertValue = currentFieldsMap[attr_name].split(
                              "!@#@!"
                            )[1];
                            if (toConvertValue.length > 0) {
                              //console.log(element)
                              let fieldCount = 0; //如果>0则有此field名
                              asfQueryParams1.forEach((item1: any) => {
                                //如果参数数组中已存在同field的     关联表单asfQueryParamsItem1,则往已存在的如果参数数组中已存在同field的关联表单asfQueryParamsItem1.asfToSelectIds1中新增asfMasterAndAsfId1
                                //              不存在则push一个新的关联表单asfQueryParamsItem1
                                if (item1.field == element.name) {
                                  fieldCount++;
                                }
                              });
                              if (fieldCount > 0) {
                                //已存在
                                //得到已存在的相关field参数对象
                                asfQueryParams1.forEach((item1: any) => {
                                  if (item1.field == element.name) {
                                    let asfMasterAndAsfId1: any = {};
                                    asfMasterAndAsfId1.asfId = toConvertValue + "";
                                    asfMasterAndAsfId1.asfMasterId = key + "";
                                    item1.asfToSelectIds.push(asfMasterAndAsfId1);
                                  }
                                });
                              } else {
                                //不存在
                                let asfQueryParamsItem1: any = {};
                                asfQueryParamsItem1.formId = element.control.formid;
                                asfQueryParamsItem1.field = element.name;
                                let asfToSelectIds1: any[] = [];
                                asfQueryParamsItem1.asfToSelectIds = asfToSelectIds1;
                                let asfMasterAndAsfId1: any = {};
                                asfMasterAndAsfId1.asfId = toConvertValue + "";
                                asfMasterAndAsfId1.asfMasterId = key + "";
                                asfToSelectIds1.push(asfMasterAndAsfId1);
                                asfQueryParams1.push(asfQueryParamsItem1);
                              }
                            }
                          }
                        });
                      }
                    }
                    setTimeout(() => {
                      getDetailQrCodesData[key].fieldsMap = modifyFieldsMap4(
                        currentFieldsMap
                      );
                    }, 800);
                  }
                }

                getAsfDataTitlesByIds(asfQueryParams1).then(({ data }) => {
                  let getAsfDataTitlesByIdsData = JSON.parse(JSON.stringify(data));
                  for (let key in currentFieldsMapArrObj) {
                    if (getDetailQrCodesData.hasOwnProperty(key)) {
                      let currentFieldsMap = getDetailQrCodesData[key].fieldsMap;
                      getAsfDataTitlesByIdsData.forEach((element1: any) => {
                        element1.list.forEach((element2: any) => {
                          if (key == element2.asfMasterId) {
                            currentFieldsMap[element1.field] =
                              currentFieldsMap[element1.field].split("!@#@!")[0] +
                              "!@#@!" +
                              element2.label;
                          }
                        });
                      });
                    }
                  }
                });

                setTimeout(() => {
                  tablesData.value = getDetailQrCodesData;
                }, 810);

                setTimeout(() => {
                  loadingInstance1.close();
                  qrCodesPrintDialogFlag.value = true;
                }, 820);
              } else if (
                props.formBasicConfig.qrCodePrintStyle &&
                props.formBasicConfig.qrCodePrintStyle == "1"
              ) {
                //fieldsMap = null
                tablesData.value = getDetailQrCodesData;
                qrCodesPrintDialogFlag.value = true;
                loadingInstance1.close();
              }
            })
            .finally(() => {
              loadingInstance1.close();
            });
        } else {
          alert("内部二维码功能未启用");
        }
      } else {
        alert("请先为本表单开启二维码功能");
      }
    } else {
      alert("未选中任何一条,请先选择");
    }
    //liwenxuan 20250114 二维码打印弹窗 end
  } else {
    if (idList.value.length > 0) {
      ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let sendData = {
          id: idList.value,
          isTrue: 2,
        };
        softDeletion(sendData).then((data: { mag: any; }) => {
          // console.log('cancel!',data)
          ElNotification({
            title: "提示信息！",
            message: data.mag,
            type: "success",
          });
          getPageData();
        });
      });
    } else {
      ElMessage.error("你还未选中要删除的项目！");
    }
  }
};

/**
@ 作者: 秦东
@ 时间: 2024-04-01 13:30:06
@ 功能: 表格选择操作
*/
const selectionChange = (row: any) => {
  state.selectionChecked = row;
  emits("selectionChange", row);
  // console.log('selectionChange', row)
  idList.value.length = 0;
  // console.log('idList.value-1-->', idList.value)
  if (row && row.length > 0) {
    row.forEach((item: any) => {
      // console.log('item', item.masters_key)
      idList.value.push(item.masters_key.toString());
    });
  }
  // console.log('idList.value--->', idList.value)
};
/**
@ 作者: 秦东
@ 时间: 2024-04-01 13:31:37
@ 功能: 获取表格头内容
*/
const columnsFilter = computed(() => {
  // console.log("获取表格头内容", props.data.columns);
  getPageData()
  if (!state.columnsCheck?.length) {
    return props.data.columns;
  } else {
    return props.data.columns.filter((item: any) => {
      return state.columnsCheck.includes(item.prop || item.type);
    });
  }
  
});
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:14:36
@ 功能: 翻页操作
*/
const handleSizeChange = (page: number) => {
  // console.log("翻页操作",page)
  state.pageSize = page;
  getListData(1);
};
const handleCurrentChange = (page: number) => {
  getListData(page);
};
/**
@ 作者: 秦东
@ 时间: 2024-04-01 14:15:16
@ 功能: 获取数据
*/
// 筛选查询列表数据
const getListData = (page?: number) => {
  if (page) {
    state.currentPage = page;
  }
  // console.log("筛选查询列表数据--->", page);
  getPageData();
};
watch(
  () => props.lookPageIsShow,
  (val: boolean) => {
    if (val && props.formId != "") {
      getPageData();
    }
  }
);

const timeAxisRef = ref(null);
const calendarPageRef = ref(null);
const cardPageRef = ref(null);
const searchSend = reactive({
  formId: props.formId,
  page: state.currentPage,
  pagesize: state.pageSize,
  searchData: json2string(props.searchData),
  viewClass: {},
});

let asfDetails = [];
let transferDetails = [];
let asfQueryParams: any[] = [];
/**
@ 作者: 秦东
@ 时间: 2024-04-01 15:51:32
@ 功能: 获取数据
*/
const getPageData = () => {
  state.loading = true;
  let sendData = {
    formId: props.formId,
    page: state.currentPage,
    pagesize: state.pageSize,
    searchData: json2string(props.searchData),
    //searchData:"id:1"
  };
  // console.log("获取列表详细信息",sendData)

  switch (viewType.value) {
    case 2:
      nextTick(() => {
        state.loading = false;
        // console.log("获取列表详细信息-------555---------->",calendarPageRef.value)
        calendarPageRef.value.calendarSearchData(sendData);
      });
      // calendarPageRef.value.calendarSearchData()
      break;
    case 3:
      nextTick(() => {
        state.loading = false;
        // console.log("获取列表详细信息-------222---------->",timeAxisRef.value)
        timeAxisRef.value.searchTimeList(sendData, 1);
      });

      break;
    case 4:
      state.loading = false;
      break;
    case 5:
      state.loading = false;
      break;
    case 6:
      nextTick(() => {
        state.loading = false;
        cardPageRef.value.getCardList(sendData);
      });
      break;
    default:
      gainFormPageListCont(sendData)
        .then((data) => {
          //console.log("获取列表详细信息----------------->",data)
          //liwenxuan 关联表单数据获取 start

          let dataList = data;
          //console.log(dataList)
          asfDetails = props.data.columns.filter((item: any) => {
            return item.fieldClass == "associatedForms";
          });

          transferDetails = props.data.columns.filter((item: any) => {
            return item.fieldClass == "lowcodeTransfer";
          });

          //console.log(asfDetails)
          if (asfDetails.length > 0 && data.data.list != null) {
            console.log(data.data.list);
            //拼装参数,asf值对象数组
            asfQueryParams = [];
            for (let j = 0; j < asfDetails.length; j++) {
              let asfQueryParamsItem: any = {};
              //console.log(asfDetails[j])
              asfQueryParamsItem.formId = asfDetails[j].control.formid;
              asfQueryParamsItem.field = asfDetails[j].field;

              let asfToSelectIds = [];
              for (let i = 0; i < data.data.list.length; i++) {
                let asfMasterAndAsfId: any = {};
                asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
                asfMasterAndAsfId.asfMasterId = data.data.list[i].id;

                asfToSelectIds.push(asfMasterAndAsfId);
              }
              asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
              asfQueryParams.push(asfQueryParamsItem);
            }
            let queryCount = 0;
            for (let i = 0; i < asfQueryParams[0].asfToSelectIds.length; i++) {
              if (asfQueryParams[0].asfToSelectIds[i].asfId != "") {
                queryCount++;
              }
            }
            //console.log(asfQueryParams)
            if (queryCount > 0) {
              getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
                //console.log(data)
                for (let i = 0; i < dataList.data.list.length; i++) {
                  //console.log(dataList.data.list[i])
                  for (let j = 0; j < data.length; j++) {
                    //console.log(data[j])
                    for (let n = 0; n < data[j].list.length; n++) {
                      if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
                        dataList.data.list[i][data[j].field] = data[j].list[n].label;
                      }
                      //console.log(data[j].list[n])
                    }
                  }
                }

                tableDataList.value = dataList.data.list;
              });
            } else {
              tableDataList.value = data.data.list;
            }
          } else {
            //console.log(data.data.list)
            transferDetails.forEach((element) => {
              //console.log(element)
              data.data.list.forEach((obj: any) => {
                //console.log(obj)
                for (const key in obj) {
                  // 确保只处理对象自身的属性（不包括原型链上的）
                  if (Object.prototype.hasOwnProperty.call(obj, key)) {
                    const value = obj[key];

                    // 特殊处理数组/嵌套对象（使用JSON格式化）
                    const formattedValue =
                      Array.isArray(value) ||
                      (typeof value === "object" && value !== null)
                        ? JSON.stringify(value, null, 2)
                        : value;

                    //console.log(`${key}: ${formattedValue}`);
                    if (key == element.field) {
                      //console.log(key)
                      /* console.log(element.control.fixedOptions)
                          console.log(obj[key]) */
                      obj[key] = mapIdsToLabels(element.control.fixedOptions, obj[key]);
                    }
                  }
                }
              });
            });
            //console.log(transferDetails)
            //convertIdsToLabels(data.data.list.)
            tableDataList.value = data.data.list;
          }
          //liwenxuan 关联表单数据获取 end
          state.total = data.data.total;
          state.loading = false;
        })
        .finally(() => {
          state.loading = false;
          asfs = [];
          radios = [];
          checkboxs = [];
          switchs = [];
          selects = [];
          tables = [];
          getAsfs();
        });
  }
};

interface TreeNode {
  id: string;
  label: string;
  disabled: boolean;
  children: TreeNode[];
}

function mapIdsToLabels(treeNodes: TreeNode[], ids1: string): string[] {
  const ids: string[] = JSON.parse(ids1);
  // 创建id到label的映射字典
  const idToLabelMap: Record<string, string> = {};

  // 递归遍历树节点并填充映射字典
  function traverse(node: TreeNode) {
    idToLabelMap[node.id] = node.label; // 存储当前节点的映射
    node.children.forEach((child) => traverse(child)); // 递归处理子节点
  }

  // 遍历根节点列表
  treeNodes.forEach((root) => traverse(root));
  //console.log(ids)
  // 将id数组转换为label数组
  return ids.map((id) => idToLabelMap[id] || "已删除的节点( id : " + id + ") ");
}

const asfGetPageData = (asfFormId: any, asfToSelectMastersKey: any) => {
  let searchData = [
    {
      id: "id",
      label: "Id",
      field: "id",
      type: "bigint(20)",
      attribute: "",
      pattern: "bigint",
      fieldClass: "id",
      activeValue: "",
      inactiveValue: "",
      config: { optionsType: 0 },
      control: { optionsValue3Formid: "", optionsValue3Field: "" },
      options: [],
      isSearch: true,
      value: asfToSelectMastersKey,
    },
  ];
  //state.loading = true;
  let sendData = {
    formId: asfFormId,
    page: 1,
    pagesize: 1,
    searchData: json2string(searchData),
  };
  //console.log("asf获取列表详细信息",sendData)
  gainFormPageListCont(sendData)
    .then((data) => {
      //console.log("获取列表详细信息----------------->",data)
      //liwenxuan 关联表单数据获取 start

      let dataList = data;
      //console.log(dataList)
      asfDetails = props.data.columns.filter((item: any) => {
        return item.fieldClass == "associatedForms";
      });

      if (asfDetails.length > 0) {
        //console.log(data.data.list)
        //拼装参数,asf值对象数组
        let asfAsfQueryParams = [];
        for (let j = 0; j < asfDetails.length; j++) {
          let asfQueryParamsItem: any = {};
          //console.log(asfDetails[j])
          asfQueryParamsItem.formId = asfDetails[j].control.formid;
          asfQueryParamsItem.field = asfDetails[j].field;

          let asfToSelectIds = [];
          for (let i = 0; i < data.data.list.length; i++) {
            let asfMasterAndAsfId: any = {};
            //asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
            asfMasterAndAsfId.asfId = data.data.list[i].id;
            asfMasterAndAsfId.asfMasterId = data.data.list[i].id;

            asfToSelectIds.push(asfMasterAndAsfId);
          }
          asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
          asfAsfQueryParams.push(asfQueryParamsItem);
        }
        let queryCount = 0;
        for (let i = 0; i < asfAsfQueryParams[0].asfToSelectIds.length; i++) {
          if (
            asfAsfQueryParams[0].asfToSelectIds[i].asfId != undefined &&
            asfAsfQueryParams[0].asfToSelectIds[i].asfId != ""
          ) {
            queryCount++;
          }
        }

        //console.log(asfAsfQueryParams)
        if (queryCount > 0) {
          getAsfDataTitlesByIds(asfAsfQueryParams).then(({ data }) => {
            //console.log(data)
            for (let i = 0; i < dataList.data.list.length; i++) {
              //console.log(dataList.data.list[i])
              for (let j = 0; j < data.length; j++) {
                //console.log(data[j])
                for (let n = 0; n < data[j].list.length; n++) {
                  if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
                    dataList.data.list[i][data[j].field] = data[j].list[n].label;
                  }
                  //console.log(data[j].list[n])
                }
              }
            }
            currentAsfTableDataList.value = dataList.data.list;
          });
        } else {
          currentAsfTableDataList.value = data.data.list;
        }
      } else {
        currentAsfTableDataList.value = data.data.list;
      }
      /* //liwenxuan 关联表单数据获取 end
			state.total = data.data.total
			state.loading = false; */
    })
    .finally(() => {
      /* state.loading = false; */
      setTimeout(() => {
        //nextTick(() => {
        //显示关联表单本条详情
        tablePageClass.value = 4;
        drawerWith.value = container.value?.clientWidth;
        asflookPageInfoIsShow.value = true;
        //});
      }, 500);
    });
};

onMounted(() => {
  getPageData();
  nextTick(() => {
    drawerWith.value = container.value?.clientWidth;
  });
  getAsfs();
});
//liwenxuan 关联表单数据获取 start
function getAsfDataTitlesByIds(asfQueryParams: any[]) {
  return request({
    url: "/javasys/lowCode/AssociatedForms/getAsfDataTitlesByIds",
    method: "post",
    data: asfQueryParams,
  });
}
//liwenxuan 关联表单数据获取 end
const asfShowDetailsFlag = ref(false);
//liwenxuan 关联表单详情弹窗 start
function showAsfDetailDialog(item: any, scope: any, asfQueryParams: any) {
  let val = scope.row;
  //asfShowDetailsFlag.value= true
  /* console.log("item----------------->",item)
	console.log("scope----------------->",scope)
	console.log("asfQueryParams----------------->",asfQueryParams)
	console.log("val----------------->",val) */
  let asfFormId = item.control.formid; //关联表单在customer_form中的id
  //alert("asfFormId:"+asfFormId)
  let scopeColumnProperty = scope.column.property; //exp:associatedForms1720570283525

  let asfQueryParamsNAsfToSelectIdsNAsfMasterId = val.id;
  //alert(asfQueryParamsNAsfToSelectIdsNAsfMasterId)
  let asfToSelectMastersKey = "";
  for (let i = 0; i < asfQueryParams.length; i++) {
    if (asfQueryParams[i].field == scopeColumnProperty) {
      for (let j = 0; j < asfQueryParams[i].asfToSelectIds.length; j++) {
        if (
          asfQueryParams[i].asfToSelectIds[j].asfMasterId ==
          asfQueryParamsNAsfToSelectIdsNAsfMasterId
        ) {
          asfToSelectMastersKey = asfQueryParams[i].asfToSelectIds[j].asfId;
        }
      }
    }
  }
  //alert("asfToSelectMastersKey:"+asfToSelectMastersKey)

  asfGetPageData(asfFormId, asfToSelectMastersKey);
}
//liwenxuan 关联表单详情弹窗 end

/**
@ 作者: 秦东
@ 时间: 2024-04-02 13:59:21
@ 功能: 判断单选值
*/
const judjeRadio = (val: any, options: any[]) => {
  // console.log("判断单选值",val, options)
  if (options && options.length > 0) {
    options.forEach((item) => {
      if (item.value == val) {
        // console.log("判断单选值",val, item.value,item.label)
        val = item.label;
      }
    });
  }
  if (val == 0 || val == "0") {
    val = "";
  }
  return val;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-02 14:49:40
@ 功能: 判断开关类型
*/
const judjeSwitch = (val: any, yesVal: any) => {
  if (val == yesVal) return true;
  return false;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:13:56
@ 功能: 列表信息删除信息
*/
const confirmEvent = (val: any) => {
  let sendData = {
    id: [val.masters_key],
    isTrue: 2,
  };
  softDeletion(sendData).then((data) => {
    // console.log('cancel!',data)
    ElNotification({
      title: "系统提示！",
      message: data.mag ? data.mag : "删除成功",
      type: "success",
    });
    getPageData();
  });
};
const cancelEvent = (val: any) => {
  //   console.log('cancel!',val)
};
const container = ref(); //实例化内容容器
const drawerWith = ref(); //编辑表单时抽屉宽度
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1);
const lookPageInfoIsShow = ref(false);
const asflookPageInfoIsShow = ref(false);
const pageInfoCont = ref<any>();
const lookPageInfo = (val: any) => {
  tablePageClass.value = 4;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};

/**
@ 作者: 秦东
@ 时间: 2024-04-05 11:29:50
@ 功能: 编辑表单内容
*/

const editInfo = (val: any) => {
  // console.log('修改数据!',val)
  operState.value = 5;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-10 15:32:55
@ 功能: 提交审批
*/
const submitApproval = (val: any) => {
  operState.value = 4;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 09:36:59
@ 功能: 撤回申请
*/
const withdrawApplication = (val: any) => {
  // console.log("撤回申请", val);
  let sendInfo = {
    id: val.masters_key,
  };
  retractRunWorkFlow(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getPageData();
  });
};

/**
@ 作者: 秦东
@ 时间: 2025-04-01 14:50:46
@ 功能: 撤回发送的企业微信消息
*/
const recallSendMsg = (val: any) => {
  let sendInfo = {
    id: val.masters_key.toString(),
  };
  recalSendMsg(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getPageData();
  });
};

/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:17:42
@ 功能: 重新提交申请
*/
const afreshSendFlow = (val: any) => {
  operState.value = 2;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:19:21
@ 功能: 申请修改数据
*/
const editFormSendFlow = (val: any) => {
  operState.value = 3;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};

/**
@ 作者: 秦东
@ 时间: 2024-07-08 09:39:52
@ 功能: 切换视图展示方式
*/
const tabsView = (val: any, types: number) => {
  viewType.value = types;
  val.isClick = true;
  viewLayout.value = val;
  // console.log("切换视图展示方式",val)
  switch (types) {
    case 2:
      props.viewPage.list.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.chart.isClick = false;
      break;
    case 3:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.chart.isClick = false;
      getPageData();
      break;
    case 4:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.chart.isClick = false;
      break;
    case 5:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.chart.isClick = false;
      break;
    case 6:
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.chart.isClick = false;
      break;
    case 7:
      props.viewPage.card.isClick = false;
      props.viewPage.list.isClick = false;
      props.viewPage.date.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      break;
    default:
      props.viewPage.date.isClick = false;
      props.viewPage.card.isClick = false;
      props.viewPage.time.isClick = false;
      props.viewPage.gantt.isClick = false;
      props.viewPage.map.isClick = false;
      props.viewPage.chart.isClick = false;
      break;
  }
};
/**
@ 作者: 秦东
@ 时间: 2024-07-25 08:30:49
@ 功能: 判断是否有标题
*/
const writeListTitle = (val: any, viewConfig: any) => {
  // console.log("判断是否有标题--1-->",val)
  // console.log("判断是否有标题--2-->",viewConfig)
  var titleAry: any[] = [];
  if (viewConfig.form && viewConfig.form.title) {
    if (viewConfig.form.title.length > 0) {
      viewConfig.form.title.forEach((item: string | number, index: any) => {
        // console.log("判断是否有标题--"+index+"-->",val[item])
        if (val[item]) {
          titleAry.push(val[item]);
        }
      });
    }
  }
  if (titleAry.length > 0) {
    return titleAry.join();
  } else {
    let firstWord = "";
    let powerAry = [
      "id",
      "creater_time",
      "edit_time",
      "masters_key",
      "states",
      "flow_id",
    ];
    for (let key in val) {
      if (val.hasOwnProperty(key)) {
        if (!powerAry.includes(key)) {
          if (val[key] != "" && val[key] != null) {
            firstWord = val[key];
          }
        }
      }
    }
    return firstWord;
  }
};

/**
@ 作者: 秦东
@ 时间: 2024-07-25 10:27:21
@ 功能: 判断是否有标题
*/
const judgeListTitle = (val: any, viewConfig: any) => {
  // console.log("判断是否有标题--3-->",val)
  // console.log("判断是否有标题--4-->",viewConfig)
  if (val && val.fieldClass == "_lableTitle") {
    if (viewConfig.form && viewConfig.form.title) {
      if (viewConfig.form.title.length > 0) {
        return true;
      }
    }
  }
  return false;
};
// 选择数据转换，默认尝试转数字
const transformOption = (val: string | number, type?: string) => {
  return formatNumber(val);
};

function optionsValue4Get4(data: any, fieldName: any) {
  //console.log("tableListPage/index","optionsValue4Get4")
  emits("optionsValue5Get5", data, fieldName);
}
/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:46:36
@ 功能: 获取级联选择值
*/
const judjeCascader = (val: any, options: any[]) => {
  if (val.length < 0) return "";
  let valAry = stringToObj(val);
  // console.log("获取级联选择值", stringToObj(val), val.length, options);
  if (!Array.isArray(valAry)) return "";
  let title = "";
  valAry.forEach((item: any) => {
    // console.log("item", item);

    // console.log(item + "=============:", item, diGuiJilian(item, options));
    if (title == "") {
      title = title + diGuiJilian(item, options);
    } else {
      title = title + " / " + diGuiJilian(item, options);
    }
  });
  return title;
};
/**
@ 作者: 秦东
@ 时间: 2024-11-29 13:57:04
@ 功能: 递归查询数据
*/
const diGuiJilian = (val: any, options: any[]) => {
  if (!Array.isArray(options)) return "";
  let dataVal = "";
  options.forEach((item: any) => {
    if (item.value == val) {
      // console.log(val + "=======递归查询数据======:", item.value, item.label);
      dataVal = item.label;
      // return dataVal;
      // return item.label;
    }

    if (item.children && item.children.length > 0) {
      // console.log(
      //   val + "=======递归查询数据====1==:",
      //   item.children,
      //   item.children.length
      // );
      let gdVal = diGuiJilian(val, item.children);
      if (gdVal != "") {
        dataVal = gdVal;
      }
    }
  });
  return dataVal;
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 16:00:41
@ 功能: 定义自定义表头
*/
const readerColumn = (column: any, isSun: number) => {
 
  if (isSun != 1) {
    let labelLong = column.label.length; // 表头label长度
    if (column.label.length < 3) {
      labelLong = 3;
    }
    let size = 15; // 根据需求定义一个字体的标尺
    return labelLong * size;
  } else {
    return "100%";
  }
};
const readerColumnSun = (column: any) => {
  //  console.log("表头label长度------------------->", column.label,column.label.length);
  let labelLong = 0; // 表头label长度
  if (column.label.length) {
    labelLong = column.label.length;
  }
  if (labelLong > 0) {
    if(labelLong > 10 ){
      return labelLong * 15;
    }else{
      return labelLong * 30;
    }
    
  }else{
    return 100;
  }

  // if (column.children) {
  //   labelLong = column.children.length;
  // }
  // if (labelLong > 0) {
  //   let countLenght = 3;
  //   column.children.forEach((item: any) => {
  //     if (item.label.length < 3) {
  //       countLenght = countLenght + 15;
  //     } else {
  //       countLenght = countLenght + item.label.length * 15;
  //     }
  //   });
  //   console.log("表头label长度-->", countLenght);
  //   return countLenght;
  // } else {
  //   return 80;
  // }
};
const tableChildren = (field:string,dataList:any) => {
  // console.log("表头label长度-->", dataList);
  // console.log("表头label长度-->", isObject(dataList));
  let jieguo = ""
  if(Array.isArray(dataList)){
    
    dataList.forEach((item:any) => {
      
      if(isObject(item)){
       
          for (let key in item) {
            //  console.log("表头label长度-->", key==field);
            if (field == key){
              // console.log("表头label长度--结果>", item[key]);
              // return item[key]
              if(jieguo!=""){
jieguo = jieguo+"<div style='width: 100%;height: 1px;border-bottom: 1px solid #EBEEF5; margin: 8px 0;'></div>"+item[key]
              }else{
                jieguo = item[key]
              }
            }
          }
      }
    })
  }
  return jieguo
}
const isObject = (obj: any) => {
    return typeof obj === "object";
}
</script>
<template>
  <div ref="container" v-loading="state.loading" class="table-list-comm">
    <el-row class="rowBox">
      <el-col :span="24">
        <el-form v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
          <template v-for="(item, index) in searchData" :key="index">
            <div class="group group-input">
              <el-form-item :label="item.label" class="form_cont">
                <el-input
                  v-if="unitIsShow(item, 'input')"
                  v-model="item.value"
                  :placeholder="'请输入' + item.label"
                  clearable
                />
                <el-date-picker
                  v-if="unitIsShow(item, 'time')"
                  v-model="item.value"
                  type="datetime"
                  :placeholder="'请选择' + item.label"
                  :shortcuts="shortcuts"
                />
                <SearchSelect
                  v-if="unitIsShow(item, 'radio')"
                  v-model:model-value="item.value"
                  :data="item"
                  :disabled="false"
                  :transform-option="transformOption"
                />
                <el-select
                  v-if="unitIsShow(item, 'switch')"
                  v-model="item.value"
                  clearable
                  :placeholder="'请选择' + item.label"
                >
                  <el-option
                    :key="item.activeValue"
                    label="是"
                    :value="item.activeValue"
                  />
                  <el-option
                    :key="item.inactiveValue"
                    label="否"
                    :value="item.inactiveValue"
                  />
                </el-select>
                <SearchSelect
                  v-if="unitIsShow(item, 'checkbox')"
                  v-model:model-value="item.value"
                  :data="item"
                  :disabled="false"
                  :is-checkbox="true"
                  :transform-option="transformOption"
                />
                <el-date-picker
                  v-if="item.fieldClass == 'datePicker'"
                  v-model="item.value"
                  :type="item.auxiliary"
                  :placeholder="'请选择' + item.label"
                  value-format="x"
                />
                <el-time-picker
                  v-if="item.fieldClass == 'timePicker'"
                  v-model="item.value"
                  arrow-control
                  :placeholder="'请选择' + item.label"
                  value-format="x"
                />
                <DeptOrgSearch
                  v-if="unitIsShow(item, 'org')"
                  v-model="item.value"
                  clearable
                  :placeholder="'请选择' + item.label"
                >
                </DeptOrgSearch>
                <DeptOrgSearch
                  v-if="unitIsShow(item, 'deptOrg')"
                  v-model:model-value="item.value"
                />
              </el-form-item>
            </div>
          </template>
          <div v-if="searchData.length" class="group group-btn">
            <el-button type="primary" @click="getPageData"
              ><el-icon><Search /></el-icon>查询</el-button
            >
            <el-button @click="resetFields(ruleSearchForm)"
              ><el-icon><Refresh /></el-icon>重置</el-button
            >
          </div>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div class="operateButArea">
          <div class="operatLeft">
            <el-text v-if="data.controlBtn.length === 0" class="mx-1 tipBox" type="info"
              >操作按钮区域</el-text
            > 
            <template v-for="item in data.controlBtn" :key="item.type">
               <el-button
                v-if="formHasPower(props.appKey,props.signCode,item.key,0)"
                v-bind="item"
                @click="setUpClick(item)"
              >
              
                {{ item.label }}
            </el-button>
            </template>
           
          </div>
          <div>
            <el-button-group class="ml-4">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="折叠查询表单"
                placement="bottom"
              >
                <el-button
                  size="small"
                  class="fa fa-search"
                  @click="config.searchIsShow = !config.searchIsShow"
                />
              </el-tooltip>
              <el-tooltip
                v-if="viewPage.list.status"
                class="box-item"
                effect="dark"
                content="列表视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-table"
                  :color="viewPage.list.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.list, 1)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="props.viewPage.card && props.viewPage.card.status"
                class="box-item"
                effect="dark"
                content="卡片视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-id-card-o"
                  :color="
                    props.viewPage.card && props.viewPage.card.isClick ? '#a0cfff' : ''
                  "
                  @click="tabsView(props.viewPage.card, 6)"
                />
              </el-tooltip>

              <el-tooltip
                v-if="props.viewPage.group && props.viewPage.group.status"
                class="box-item"
                effect="dark"
                content="分组"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-table"
                  :color="
                    props.viewPage.group && props.viewPage.group.isClick ? '#a0cfff' : ''
                  "
                  @click="tabsView(props.viewPage.group, 8)"
                />
              </el-tooltip>

              <el-tooltip
                v-if="viewPage.date.status"
                class="box-item"
                effect="dark"
                content="日历视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-calendar"
                  :color="viewPage.date.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.date, 2)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="viewPage.time.status"
                class="box-item"
                effect="dark"
                content="时间轴"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-clock-o"
                  :color="viewPage.time.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.time, 3)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="viewPage.gantt.status"
                class="box-item"
                effect="dark"
                content="甘特图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-bar-chart"
                  :color="viewPage.gantt.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.gantt, 4)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="viewPage.map.status"
                class="box-item"
                effect="dark"
                content="地图视图"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-map-signs"
                  :color="viewPage.map.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.map, 5)"
                />
              </el-tooltip>
              <el-tooltip
                v-if="viewPage.chart.status"
                class="box-item"
                effect="dark"
                content="BI报表"
                placement="top"
              >
                <el-button
                  size="small"
                  class="fa fa-line-chart"
                  :color="viewPage.chart.isClick ? '#a0cfff' : ''"
                  @click="tabsView(viewPage.chart, 7)"
                />
              </el-tooltip>
            </el-button-group>
          </div>
        </div>
      </el-col>
      <el-col v-if="viewType == 1" :span="24" class="tableTdClass">
        <el-table
          v-bind="data.tableProps"
          ref="table"
          :data="tableDataList"
          table-layout="fixed"
          border
          @selection-change="selectionChange"
        >
          <template v-for="item in columnsFilter" :key="item.id || item.label">
            <el-table-column
              v-if="['-'].includes(item.fieldClass)"
              :type="item.type"
              :prop="item.field"
              :label="item.label"
              config=""
              width="60"
              fixed
              header-align="center"
              align="center"
            >
              <template v-if="item.help" #header="scope">
                <tooltip :content="item.help" />
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.fieldClass == '__control'"
              :prop="item.field"
              :label="item.label"
              config=""
              width="200"
              header-align="center"
              align="center"
              fixed="right"
            >
              <template #default="scope">
                <el-button-group>
                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 1"
                    class="box-item"
                    effect="dark"
                    content="提交审批"
                    placement="top-end"
                  >
                    <el-button
                      type="success"
                      size="small"
                      class="fa fa-send-o"
                      @click="submitApproval(scope.row)"
                    />
                  </el-tooltip>

                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 2"
                    class="box-item"
                    effect="dark"
                    content="重新申请"
                    placement="top-end"
                  >
                    <el-button
                      type="warning"
                      size="small"
                      class="fa fa-retweet"
                      @click="afreshSendFlow(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="查看详情"
                    placement="top-end"
                  >
                    <el-button
                      type="primary"
                      size="small"
                      class="fa fa-eye"
                      @click="lookPageInfo(scope.row)"
                    />
                  </el-tooltip>

                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="打印表单"
                    placement="top-end"
                  >
                    <el-button
                      @click="printHtmlPage(props.formId,props.appKey,props.versionid, props.formKey,scope.row)"
                      type="primary"
                      size="small"
                      class="fa fa-print"
                      
                    />
                  </el-tooltip>

                  <el-popconfirm
                    v-if="scope.row.retract_true"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="QuestionFilled"
                    icon-color="#F56C6C"
                    title="您确定要撤回此次发送的消息？"
                    @confirm="recallSendMsg(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button
                        size="small"
                        class="fa fa-mail-reply-all"
                        color="rgb(250, 181.5, 181.5)"
                        
                      />
                    </template>
                  </el-popconfirm>

                  <el-popconfirm
                    v-if="scope.row.flowIsOpen == 1 && scope.row.isRetract"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="QuestionFilled"
                    icon-color="#F56C6C"
                    title="您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！"
                    @confirm="withdrawApplication(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button size="small" class="fa fa-reply-all" />
                    </template>
                  </el-popconfirm>
                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 2"
                    class="box-item"
                    effect="dark"
                    content="编辑"
                    placement="top-end"
                  >
                    <el-button
                      v-if="formHasPower(props.appKey,props.signCode,'bj',0)"
                      type="info"
                      size="small"
                      class="fa fa-edit"
                      @click="editInfo(scope.row)"
                    />
                  </el-tooltip>
                  <el-popconfirm
                    v-if="scope.row.taskStatus == 2 || scope.row.taskStatus == 1"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="QuestionFilled"
                    icon-color="#F56C6C"
                    title="您确定要删除此条记录?一经删除！数据将不可恢复！"
                    @confirm="confirmEvent(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button v-if="formHasPower(props.appKey,props.signCode,'sc',0)" type="danger" size="small" class="fa fa-trash-o" />
                    </template>
                  </el-popconfirm>

                  <el-tooltip
                    v-if="scope.row.flowIsOpen == 1 && scope.row.taskStatus == 4"
                    class="box-item"
                    effect="dark"
                    content="申请修改"
                    placement="top-end"
                  >
                    <el-button
                      type="info"
                      size="small"
                      class="fa fa-edit"
                      @click="editFormSendFlow(scope.row)"
                    />
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.fieldClass == '_lableTitle'"
              label="标题"
              config=""
              min-width="320"
              header-align="center"
              align="center"
            >
              <template #default="scope">
                {{ writeListTitle(scope.row, viewPage.list) }}
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.fieldClass == ''"
              :prop="item.field"
              :label="item.label"
              :width="readerColumnSun(item)"
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <template v-for="sunItem in item.children" v-if="item.pattern == 'table'"> 
                  <el-table-column  v-if="sunItem.fieldClass == ''" :prop="sunItem.field" :label="sunItem.label"  header-align="center"  align="center" :min-width="readerColumnSun(sunItem)">
                    <template #default="scopeChilder">
                      <div v-html="tableChildren(sunItem.field,scopeChilder.row[item.field])"></div>
                    </template>
                  </el-table-column>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :prop="item.field"
              :label="item.label"
              config=""
              min-width="220"
              header-align="center"
              align="center"
            >
              <template v-if="item.help" #header="scope">
                {{ scope.column.label }}
                <tooltip :content="item.help" />
              </template>

              <template v-if="item.fieldClass == 'select'" #default="scope">
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == ''" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}} -->
                <el-tag v-if="scope.row[scope.column.property] == 1" type="success"
                  >启用</el-tag
                >
                <el-tag v-if="scope.row[scope.column.property] == 2" type="danger"
                  >已禁用</el-tag
                >
                <el-tag v-if="scope.row[scope.column.property] == 3" type="info"
                  >已删除</el-tag
                >
              </template>
              <template v-if="item.fieldClass == 'deptOrg'" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}} -->
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == 'owner'" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}}拥有者 -->
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == 'lowcodeImage'" #default="scope">
                <el-image
                  style="width: 30px; height: 30px"
                  :src="scope.row[scope.column.property]"
                  :fit="fit"
                />
              </template>
              <template v-if="item.fieldClass == 'expand-user'" #default="scope">
                {{ scope.row[scope.column.property] }}
                <!--选择用户-->
              </template>
              <template v-if="item.fieldClass == 'cascader'" #default="scope">
                {{ judjeCascader(scope.row[scope.column.property], item.options) }}
              </template>
              <template v-if="item.fieldClass == 'radio'" #default="scope">
                <!-- {{scope.row[scope.column.property]}}{{item}} -->
                {{ judjeRadio(scope.row[scope.column.property], item.options) }}
              </template>
              <template v-if="item.fieldClass == 'upload'" #default="scope">
                <div class="demo-image__error">
                  <el-image
                    style="width: 30px; height: 30px"
                    :src="scope.row[scope.column.property]"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </template>
              <template v-if="item.fieldClass == 'switch'" #default="scope">
                <el-tag
                  v-if="judjeSwitch(scope.row[scope.column.property], item.activeValue)"
                  type="success"
                  effect="light"
                >
                  启用
                </el-tag>
                <el-tag v-else type="danger" effect="light"> 禁用 </el-tag>
              </template>
              <template v-if="item.fieldClass == 'baidumap'" #default="scope">
                {{ scope.row[scope.column.property] }}
              </template>
              <template v-if="item.fieldClass == 'associatedForms'" #default="scope">
                <el-link
                  key="primary"
                  type="primary"
                  @click="showAsfDetailDialog(item, scope, asfQueryParams)"
                >
                  {{ scope.row[scope.column.property] }}
                </el-link>
              </template>
              <template v-else #default="scope">
                {{ scope.row[scope.column.property] }}
              </template>
            </el-table-column>
          </template>
        </el-table>
      </el-col>
      <el-col v-if="viewType == 1 && state.total > 0" :span="24">
        <div class="pageBox">
          <el-pagination
            v-model:currentPage="state.currentPage"
            v-model:page-size="state.pageSize"
            :page-sizes="[20, 30, 40, 50] as any"
            :total="state.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col v-if="viewType == 2" :span="24">
        <CalendarPage
          ref="calendarPageRef"
          :search-send="searchSend"
          :body-hight="265"
          :drawer-with="drawerWith"
          :view-setup="viewPage.date"
        />
      </el-col>
      <el-col v-if="viewType == 3" :span="24">
        <TimeAxisPage
          ref="timeAxisRef"
          :data="tableDataList"
          :view-layout="viewLayout"
          :columns-filter="columnsFilter"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.time"
        />
      </el-col>
      <el-col v-if="viewType == 4" :span="24">
        <GanttPage
          ref="ganttPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.gantt"
        />
      </el-col>
      <el-col v-if="viewType == 5" :span="24">
        <MapPage
          ref="mapPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.map"
        />
      </el-col>
      <el-col v-if="viewType == 6" :span="24">
        <CardPage
          ref="cardPageRef"
          :search-send="searchSend"
          :drawer-with="drawerWith"
          :view-setup="viewPage.card"
          :columns-filter="columnsFilter"
        />
      </el-col>
      <el-col v-if="viewType == 7" :span="24">
        <SeeContChart
          :echats-views="echatsViewsdf"
          :table-key="formBasicConfig.name"
          :types="1"
        />
        
      </el-col>
      <el-col :span="24" style="display: none"> </el-col>
      <el-col :span="24" style="display: none">
        <el-button-group>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="提交审批"
            placement="top-end"
          >
            <el-button type="success" size="small" class="fa fa-send-o" />
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            content="重新申请"
            placement="top-end"
          >
            <el-button type="warning" size="small" class="fa fa-retweet" />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看详情"
            placement="top-end"
          >
            <el-button type="primary" size="small" class="fa fa-eye" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="撤回" placement="top-end">
            <el-button size="small" class="fa fa-reply-all" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top-end">
            <el-button type="danger" size="small" class="fa fa-trash-o" />
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            content="申请修改"
            placement="top-end"
          >
            <el-button type="info" size="small" class="fa fa-edit" />
          </el-tooltip>
        </el-button-group>
      </el-col>
    </el-row>
    <FormPageCont
      v-model:is-show="lookPageInfoIsShow"
      :drawer-with="drawerWith"
      :page-info="pageInfoCont"
      :table-page-class="tablePageClass"
      :oper-state="operState"
      @get-page-data="getPageData"
      @options-value4-get4="optionsValue4Get4"
    />
    <FormPageCont
      v-model:is-show="asflookPageInfoIsShow"
      :drawer-with="drawerWith"
      :page-info="currentAsfTableDataList[0]"
      :table-page-class="tablePageClass"
      :oper-state="operState"
      @get-page-data="getPageData"
      @options-value4-get4="optionsValue4Get4"
    />

    <TableFlow
      v-model:isopen="openTaskDrawer"
      :versionid="props.versionid"
      :versiontitle="props.versiontitle"
      :drawerwith="drawerWith"
      :cfid="props.formId"
      @searchquery="getListData"
    />
    <!-- 2025 liwenxuan 二维码打印 -->
    <el-dialog
      v-model="qrCodesPrintDialogFlag"
      class="glxxsztc"
      top="150px"
      :close-on-click-modal="false"
      title="生成的二维码"
      :show-close="false"
      style="margin-top: 10px"
      width="40%"
    >
      <div
        v-if="formBasicConfig.qrCodePrintStyle == '2'"
        style="max-width: 600px; min-height: 50px; max-height: 750px; overflow-y: auto"
      >
        <div
          v-for="(tableData, tableKey) in tablesData"
          :id="tableKey"
          :key="tableKey"
          :ref="(el: any) => { if (el) tableRefs[tableKey] = el }"
          style="margin-bottom: 30px; width: 95%"
        >
          <table>
            <tr>
              <th colspan="2">
                {{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}
              </th>
              <td rowspan="6" style="width: 240px">
                <img
                  :src="tableData.bufferedImage"
                  alt="二维码"
                  width="200px"
                  style="margin-top: 5px"
                />
              </td>
            </tr>
            <tr v-for="(item, fIndex) in tableData.fieldsMap" :key="fIndex">
              <th>{{ item.key }}</th>
              <td>{{ item.value }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div
        v-if="formBasicConfig.qrCodePrintStyle == '1'"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          min-height: 50px;
          max-height: 750px;
          overflow-y: auto;
        "
      >
        <div
          v-for="(tableData, tableKey) in tablesData"
          :id="tableKey"
          :key="tableKey"
          :ref="(el: any) => { if (el) tableRefs[tableKey] = el }"
          style="margin-bottom: 30px; width: 400px"
        >
          <table>
            <tr>
              <th style="font-weight: bold; font-size: medium" colspan="1">
                {{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{
                  tablesData[tableKey].dataTitle
                }}
              </th>
            </tr>
            <tr>
              <th>
                <img
                  :src="tableData.bufferedImage"
                  alt="二维码"
                  width="auto"
                  height="100%"
                />
              </th>
            </tr>
          </table>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            :disabled="isButton1Disabled"
            type="primary"
            plain
            @click="downloadTables"
            >下载</el-button
          >
          <el-button
            :disabled="isButton2Disabled"
            type="primary"
            plain
            @click="closeQrDownload"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="asfShowDetailsFlag"
      title="关联表单详情查看"
      top="20px"
      style="margin-top:70px;margin-left:270px"
    >
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.rowBox {
  width: 100%;
}
.table-list-comm {
  padding: 0px 15px 15px 15px;
}
.seacherForm {
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pageBox {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.operateButArea {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
  .operatLeft {
    padding-bottom: 2px;
  }
}
.group {
  width: auto;
  margin-right: 10px;
}
.demo-image__error .block {
  padding: 0px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

td,
th {
  border: 1px solid black;
  padding: 8px;
  vertical-align: middle; /* 设置文字上下居中 */
}
.tableTdClass{
  :deep .cell{
    padding: 0;
  }
  :deep .el-table--default .cell{
    padding: 0;
  }
}
</style>
