From e17db58ad1d02c42d7cfb557eb8b9cb306734a08 Mon Sep 17 00:00:00 2001 From: han2015 <1019850453@qq.com> Date: Fri, 4 Jul 2025 15:48:34 +0800 Subject: [PATCH] =?UTF-8?q?app=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=AF=BC?= =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/DesignForm/tableButton.ts | 14 + src/components/DesignForm/app/index.vue | 298 +++++++++++------- src/components/DesignForm/app/nginx.ini | 68 ---- src/components/DesignForm/exportPanel.vue | 58 ++++ .../DesignForm/tableListPage/index.vue | 4 + 5 files changed, 260 insertions(+), 182 deletions(-) delete mode 100644 src/components/DesignForm/app/nginx.ini create mode 100644 src/components/DesignForm/exportPanel.vue diff --git a/src/api/DesignForm/tableButton.ts b/src/api/DesignForm/tableButton.ts index ba813e3..bc3832d 100644 --- a/src/api/DesignForm/tableButton.ts +++ b/src/api/DesignForm/tableButton.ts @@ -33,6 +33,20 @@ export const tableButtonList :attrButton[] = [ size: "small", icon: "editPen" }, + { + label: "导入", + key:"import", + type:"danger", + size: "small", + icon: "upload" + }, + { + label: "导出", + key:"export", + type:"primary", + size: "small", + icon: "download" + }, { label: "批量删除", key: "del", diff --git a/src/components/DesignForm/app/index.vue b/src/components/DesignForm/app/index.vue index 7d8cab5..2c75ba6 100644 --- a/src/components/DesignForm/app/index.vue +++ b/src/components/DesignForm/app/index.vue @@ -52,6 +52,7 @@ 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 AKSelect from "@/components/DesignForm/public/form/select.vue"; +import exportPanel from '../exportPanel.vue'; const props = withDefaults( defineProps<{ @@ -143,6 +144,9 @@ const tableDataList = ref([]); // 表格行数据 const currentAsfTableDataList = ref([]); //当前点击的关联表单数据 const openTaskDrawer = ref(false); //新增数据 +//导出操作父元素 +const dynamicVNode = ref(null) //组件的父组件 + const state = reactive({ loading: false, currentPage: 1, @@ -537,6 +541,10 @@ const setUpClick = (val: string, id: string) => { if (val.key == "newAdd") { drawerWith.value = container.value?.clientWidth; openTaskDrawer.value = true; + }else if (val.key === "export"){ + doExportTableData() + }else if (val.key === "import"){ + alert("appPageImport") } else if (val.key == "showQrCode") { //liwenxuan 20250114 二维码打印弹窗 start //在此组装参数,以生成二维码图片 @@ -947,123 +955,180 @@ const getPageData = () => { break; default: state.loading = true; - 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"; - }); + //by han2015, 抽成独立部分，方便其他功能调用 + doGainFormPageListCont(sendData).then(datas=>{ + tableDataList.value = datas.list + state.total=datas.total + }).finally(()=>{ + //原 finally的处理内容 + state.loading = false; + asfs = []; + radios = []; + checkboxs = []; + switchs = []; + selects = []; + tables = []; + dofs = []; + getAsfs(); + }) + } +}; - transferDetails = props.data.columns.filter((item: any) => { - return item.fieldClass == "lowcodeTransfer"; - }); +//表格导出 +function doExportTableData(){ + function exportFunc(fields:{field:string,label:string}[]){ + let sendData = { + formId: props.formId, + page: 1, + pagesize: 10000, + searchData: json2string(props.searchData), + }; + //全量获取页面的数据 + doGainFormPageListCont(sendData).then(datas=>{ + const array: string[] = []; + //写入表头行 + const title:string[] = []; + for (let val of fields){ + title.push(val.label) + } + array.push(title.join(",")) - 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 = []; - // console.log(data.data.list) - 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++; + //写入数据行 + datas.list.forEach((item)=>{ + const line=[]; + for (let val of fields){ + line.push((item[val.field] as string).replaceAll(",","，")) + } + array.push(line.join(",")) + }) + + //去掉标题行的统计 + if((array.length-1)!==datas.total) alert(`实际数据总量：${datas.total}, 导出数据总量：${array.length}`) + + const filename= props.pickAppMenu.label+".csv" + const csvString = array.join('\n'); + const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" }); + const link = document.createElement("a"); + if (link.download !== undefined) { // feature detection + // Browsers that support HTML5 download attribute + const url = URL.createObjectURL(blob); + link.setAttribute("href", url); + link.setAttribute("download", filename); + link.style.visibility = "hidden"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + }).finally(()=>dynamicVNode.value=null) + } + + dynamicVNode.value=h(exportPanel,{ + fields:columnsFilter.value, + commitFunc:exportFunc, + closeFunc:()=>dynamicVNode.value=null + }) +} + +async function doGainFormPageListCont(sendData:any){ + const data =await gainFormPageListCont(sendData) + // 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"; + }); + + 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 = []; + // console.log(data.data.list) + 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) { + //-------------------直接return 异步结果---------------------- + return await 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]) } - //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; } - - //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 = []; - dofs = []; - getAsfs(); - }); - } -}; - + } + return dataList.data; + }); + } + + return data.data; + } + + //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]) + } + } + } + }); + }); + + return data.data; + + //tableDataList.value = data.data.list + //liwenxuan 关联表单数据获取 end +} interface TreeNode { id: string; @@ -2022,7 +2087,7 @@ const readerColumnSun = (column: any) => { - + { type="primary" @click="showAsfDetailDialog(item, scope, asfQueryParams)" > - {{ scope.row[scope.column.property] }} + {{ scope.row[scope.column.property] }}== + @@ -2213,6 +2279,10 @@ const readerColumnSun = (column: any) => { @searchquery="getListData" /> + +
+ +
+ +import { ElDialog } from 'element-plus'; + +const props = withDefaults(defineProps<{ + fields:any[], + commitFunc:(fields:{field:string,label:string}[])=>void, + closeFunc:()=>void, //父级只需销毁组件 +}>(),{}) + +const checkList=ref([]) + +onMounted(()=>{ + props.fields.forEach((val)=>{ + if (val.attribute===''){ + checkList.value.push(val.field) + } + }) +}) + +function handleData(){ + const arr:{field:string,label:string}[]=[] + props.fields.forEach((val)=>{ + if(checkList.value.includes(val.field)){ + arr.push({ field:val.field, label:val.label }) + } + }) + props.commitFunc(arr) +} + + + + \ No newline at end of file diff --git a/src/components/DesignForm/tableListPage/index.vue b/src/components/DesignForm/tableListPage/index.vue index 3e631a9..c7b3505 100644 --- a/src/components/DesignForm/tableListPage/index.vue +++ b/src/components/DesignForm/tableListPage/index.vue @@ -538,6 +538,10 @@ const setUpClick = (val: string, id: string) => { if (val.key == "newAdd") { drawerWith.value = container.value?.clientWidth; openTaskDrawer.value = true; + }else if (val.key === "export"){ + alert("tableListExport") + }else if (val.key === "import"){ + alert("tableListImport") } else if (val.key == "showQrCode") { //liwenxuan 20250114 二维码打印弹窗 start //在此组装参数,以生成二维码图片