1

src/views/flow/components/FieldExport.vue

@@ -18,28 +18,34 @@
 
         <h4 style="display: inline-block;">导出文件名：</h4>
         <el-input style="max-width: 220px;" size="small" v-model="fileName"></el-input>
+        <el-button style="margin-left: 10px;" type="primary" size="small" icon="el-icon-download" @click="confirm">导出</el-button>
         <h4>需要导出字段：</h4>
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
         <div style="margin: 15px 0;"></div>
         <el-checkbox-group v-model="selectedFields" @change="handleCheckedFieldsChange">
-          <el-checkbox v-for="field in config.fields" :label="field.name" :key="field.id">{{ field.label }}</el-checkbox>
+          <el-checkbox v-for="field in mainFields" :label="field.name" :key="field.id">{{ field.label }}</el-checkbox>
         </el-checkbox-group>
-      </div>
 
-      <template #footer>
+        <h4 style="color: var(--theme-color);">存在子表单</h4>
-        <el-button type="primary" :loading="loading" @click="confirm">确认</el-button>
+        <div v-for="field in relationsFields" :key="field.id" style="padding-left: 10px;">
-      </template>
+          <FieldExportItem :custom-model-id="field.sub_custom_model_id"></FieldExportItem>
+        </div>
+      </div>
     </vxe-modal>
   </div>
 </template>
 
 <script>
+import FieldExportItem from "./FieldExportItem.vue";
 import {fieldConfig} from "@/api/flow"
 import {defaultModalSize} from "@/settings";
 import {PopupManager} from "element-ui/lib/utils/popup";
 import {download} from "@/utils/downloadRequest"
 
 export default {
+  components: {
+    FieldExportItem
+  },
   props: {
     isShow: {
       type: Boolean,
@@ -62,10 +68,17 @@ export default {
       fileName: `导出_${this.$moment().valueOf()}`,
       selectedFields: [],
       checkAll: false,
-      isIndeterminate: false
+      isIndeterminate: false,
+    }
+  },
+  computed: {
+    mainFields() {
+      return this.config?.fields?.filter(i => i.type !== 'relation')
+    },
+    relationsFields() {
+      return this.config?.fields?.filter(i => i.type === 'relation')
     }
   },
-  computed: {},
   methods: {
     handleCheckedFieldsChange(value) {
       let checkedCount = value.length;
@@ -136,7 +149,7 @@ export default {
           export_fields[key] = this.config?.fields?.find(j => j.name === key)?.label
         })
         await download('/api/oa/flow/list-groups', 'get', {
-          ...this.select,
+          custom_model_id: this.select.custom_model_id,
           type: this.$route.params.type,
           is_export: 1,
           export_name: this.fileName,
@@ -154,8 +167,10 @@ export default {
       }
     },
     "select.custom_model_id"(newVal) {
+      if(newVal) {
         this.getFields(newVal)
       }
+    }
   },
 }
 </script>

src/views/flow/components/FieldExportItem.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <h5>当前导出流程： {{ config.name }} {{ customModelId }}</h5>
+
+    <h4 style="display: inline-block;">导出文件名：</h4>
+    <el-input style="max-width: 220px;" size="small" v-model="fileName"></el-input>
+    <el-button style="margin-left: 10px;" type="primary" size="small" icon="el-icon-download" @click="confirm">导出</el-button>
+    <h4>需要导出字段：</h4>
+    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+    <div style="margin: 15px 0;"></div>
+    <el-checkbox-group v-model="selectedFields" @change="handleCheckedFieldsChange">
+      <el-checkbox v-for="field in mainFields" :label="field.name" :key="field.id">{{ field.label }}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+import {fieldConfig} from "@/api/flow";
+import {download} from "@/utils/downloadRequest";
+
+export default {
+  props: {
+    customModelId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      config: {
+        fields: []
+      },
+      fileName: `导出_${this.$moment().valueOf()}`,
+      selectedFields: [],
+      checkAll: false,
+      isIndeterminate: false,
+    }
+  },
+  methods: {
+    handleCheckedFieldsChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.config?.fields?.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.config?.fields?.length;
+    },
+    handleCheckAllChange(val) {
+      this.selectedFields = val ? this.config.fields?.map(i => i.name) : [];
+      this.isIndeterminate = false;
+    },
+    async getFields(id) {
+      try {
+        const { customModel } = await fieldConfig(id)
+        this.config = customModel
+        this.config.fields.forEach(i => {
+          i.name = 'data.' + i.name
+        })
+        this.fileName = `${customModel.name}_${this.$moment().valueOf()}`
+      } catch (err) {
+        console.error(id)
+      }
+    },
+
+    async confirm() {
+      // 自定义 paramsSerializer 函数
+      const paramsSerializer = (params) => {
+        const parts = [];
+
+        // 递归处理嵌套对象
+        const serialize = (obj, parentKey) => {
+          for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+              const value = obj[key];
+              const fullKey = parentKey ? `${parentKey}[${key}]` : key;
+
+              if (value && typeof value === 'object' && !Array.isArray(value)) {
+                // 如果是嵌套对象，递归处理
+                serialize(value, fullKey);
+              } else if (Array.isArray(value)) {
+                // 如果是数组，遍历数组并处理每个元素
+                value.forEach((item, index) => {
+                  if (item && typeof item === 'object') {
+                    // 如果数组元素是对象，递归处理
+                    serialize(item, `${fullKey}[${index}]`);
+                  } else {
+                    // 如果数组元素是普通值，直接序列化
+                    parts.push(`${encodeURIComponent(`${fullKey}[${index}]`)}=${encodeURIComponent(item)}`);
+                  }
+                });
+              } else {
+                // 如果是普通键值对，直接序列化
+                parts.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`);
+              }
+            }
+          }
+        };
+
+        // 开始序列化
+        serialize(params, '');
+
+        // 将部分拼接为查询字符串
+        return parts.join('&');
+      };
+      try {
+        let export_fields = {}
+        this.selectedFields?.forEach(field => {
+          let key = field
+          export_fields[key] = this.config?.fields?.find(j => j.name === key)?.label
+        })
+        await download('/api/oa/flow/list-groups', 'get', {
+          custom_model_id: this.customModelId,
+          type: this.$route.params.type,
+          is_export: 1,
+          export_name: this.fileName,
+          export_fields
+        }, this.fileName+'.xlsx', paramsSerializer)
+      } catch (err) {
+        console.error(err)
+      }
+    }
+  },
+  computed: {
+    mainFields() {
+      return this.config?.fields?.filter(i => i.type !== 'relation')
+    },
+  },
+  watch: {
+    customModelId: {
+      handler: function (newVal,oldVal) {
+        console.log(33, newVal,oldVal)
+        if(newVal) {
+          this.getFields(newVal)
+        }
+      },
+      immediate: true
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+</style>