herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

app页面的导出功能

han_v2
han2015 5 months ago
parent
0eeb704487
commit
e17db58ad1
5 changed files with 260 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/api/DesignForm/tableButton.ts
  2. 298
      src/components/DesignForm/app/index.vue
  3. 68
      src/components/DesignForm/app/nginx.ini
  4. 58
      src/components/DesignForm/exportPanel.vue
  5. 4
      src/components/DesignForm/tableListPage/index.vue

14
src/api/DesignForm/tableButton.ts
View File

@ -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",

298
src/components/DesignForm/app/index.vue
View File

@ -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<VNode | null>(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) => {
</el-table>
</template>
</el-table-column>
<el-table-column
v-else
:prop="item.field"
@ -2078,9 +2143,10 @@ const readerColumnSun = (column: any) => {
type="primary"
@click="showAsfDetailDialog(item, scope, asfQueryParams)"
>
{{ scope.row[scope.column.property] }}
{{ scope.row[scope.column.property] }}==
</el-link>
</template>
</el-table-column>
</template>
</el-table>
@ -2213,6 +2279,10 @@ const readerColumnSun = (column: any) => {
@searchquery="getListData"
/>
</div>
<div v-if="dynamicVNode">
<component :is="dynamicVNode" />
</div>
<!-- 2025 liwenxuan 二维码打印 -->
<el-dialog
v-model="qrCodesPrintDialogFlag"

68
src/components/DesignForm/app/nginx.ini
View File

@ -1,68 +0,0 @@
location /systemapi {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/systemapi/(.*)$ /$1 break;
proxy_pass http://36.133.126.182:39250; #设置代理服务器的协义和地址
#proxy_pass http://120.224.6.6:60001;
}
location /kpiapi {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/kpiapi/(.*)$ /$1 break;
proxy_pass http://36.133.126.182:6666; #设置代理服务器的协义和地址
#proxy_pass http://120.224.6.6:60002;
}
location /hrapi {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/hrapi/(.*)$ /$1 break;
proxy_pass http://120.224.6.6:39168; #设置代理服务器的协义和地址
}
location /api {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://36.133.126.182:8888; #设置代理服务器的协义和地址
}
location /javasys {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/javasys/(.*)$ /$1 break;
proxy_pass http://36.133.126.182:8111; #设置代理服务器的协义和地址
}
location /javasys/lowCode {
#host修改为真实的域名和端口
proxy_set_header Host $http_host;
#客户真实ip
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#客户端真实协议
proxy_set_header X-Forwarded-Proto $scheme;
rewrite ^/javasys/(.*)$ /$1 break;
proxy_pass http://36.133.126.182:39999; #设置代理服务器的协义和地址
}

58
src/components/DesignForm/exportPanel.vue
View File

@ -0,0 +1,58 @@
<script lang="ts" setup>
import { ElDialog } from 'element-plus';
const props = withDefaults(defineProps<{
fields:any[],
commitFunc:(fields:{field:string,label:string}[])=>void,
closeFunc:()=>void, //父级只需销毁组件
}>(),{})
const checkList=ref<string[]>([])
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)
}
</script>
<template>
<el-dialog :model-value="true" :style="{height: '60%',width:'60%'}" @close="props.closeFunc">
<h3>请选择导出的字段</h3>
<div style="display: flex;height: 60%;margin: 20px;">
<el-checkbox-group v-model="checkList">
<template v-for="item in props.fields">
<el-checkbox v-if="item.attribute===''" :key="item.field" :label="item.label" :value="item.field" />
</template>
</el-checkbox-group>
</div>
<el-button type="primary" @click="handleData">导出</el-button>
</el-dialog>
</template>
<style>
/* dialog的body内容样式设置*/
.el-dialog__body{
height: 96%;
display: flex;
flex-direction: column;
align-items: center;
}
.el-dialog{
/* 让整个弹出窗口位置更高一些*/
--el-dialog-margin-top:7vh;
}
</style>

4
src/components/DesignForm/tableListPage/index.vue
View File

@ -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
//在此组装参数,以生成二维码图片

Write Preview
Loading…
Cancel
Save