添加多字段映射，接口对接

src/stores/excel.ts

@@ -88,3 +88,75 @@ export const useExcelStore = defineStore('excelStore', {
     }
   }
 })
+
+export const useExcelChangeStore = defineStore('excelChangeStore', {
+  state: () => ({
+    allMapConfigs: {}, // 缓存当前这条数据的所有映射关系
+    scriptList: [], // 脚本
+    orderFieldList: [], // 订单字段
+    variableField: [], // 后端获取的变量字段
+    usedFieldList: [] // 当前编辑column使用过的映射字段
+  }),
+  getters: {
+    getAllMapConfigs(): any {
+      return this.allMapConfigs
+    },
+    getScriptList(): any {
+      return this.scriptList
+    },
+    getEffectConfigs(): any[] {
+      const currenttitle = this.usedFieldList[0]?.title || ''
+      const res: any = [...this.usedFieldList]
+      for (const key in this.allMapConfigs) {
+        if (key != currenttitle) {
+          if (this.allMapConfigs[key].orderFiledConfs.length) {
+            res.push(...this.allMapConfigs[key].orderFiledConfs)
+          }
+        }
+      }
+      return res.map((item) => item.mapField)
+    },
+    getAllFields(): any {
+      return [
+        {
+          label: '普通字段',
+          options: this.orderFieldList.map((item) => {
+            this.getEffectConfigs.includes(item.filedName)
+              ? (item.disabled = true)
+              : (item.disabled = false)
+            return item
+          })
+        },
+        {
+          label: '变量字段',
+          options: this.variableField.map((item) => {
+            this.getEffectConfigs.includes(item.filedName)
+              ? (item.disabled = true)
+              : (item.disabled = false)
+            return item
+          })
+        }
+      ]
+    }
+  },
+  actions: {
+    setAllMapConfigs(config: any) {
+      this.allMapConfigs = config
+    },
+    setSingleFieldMap(config: any) {
+      this.allMapConfigs[config.title] = config
+    },
+    setScriptList(list: any) {
+      this.scriptList = list
+    },
+    setOrderFieldList(list: any) {
+      this.orderFieldList = list
+    },
+    setVariableField(list: any) {
+      this.variableField = list
+    },
+    setUsedFieldList(list: any) {
+      this.usedFieldList = list
+    }
+  }
+})

src/utils/excel.ts

@@ -201,17 +201,23 @@ export function filterRunData(data: any, config: boolean = false) {
   // 映射字段配置生成
   const configs: Recordable = {}
   const temConf = {
+    // title: '',
+    // content: '',
+    // mapField: '',
+    // scriptName: '',
+    // groupTitle: '',
+    // templateFileId: '',
+    // excelOrderFiledConfId: '',
+    // params: {},
+    // orderFiled: {},
+    excelOrderFiledConfId:'',
     title: '',
-    content: '',
-    mapField: '',
-    scriptName: '',
-    groupTitle: '',
-    templateFileId: '',
-    excelOrderFiledConfId: '',
-    params: {},
-    orderFiled: {}
+    orderFiledConfs: [],
+    templateFileId: ''
   }
 
+console.log(data, 'data-----')
+
   data.forEach((row: any) => {
     const rw: Recordable = {}
     row.order.forEach((itm: any) => {
@@ -239,6 +245,8 @@ export function filterRunData(data: any, config: boolean = false) {
     res.push(rw)
   })
 
+  console.log('----res', res)
+
   return {
     res,
     titles: [...titles],

src/views/order/orderChange/components/ConfigFormItem.vue

+<template>
+  <!-- 字段映射设置 -->
+  <el-col>
+    <el-form-item label="对应字段" prop="mapField">
+      <el-select
+        v-model="item.mapField"
+        style="width: 220px"
+        filterable
+        placeholder="请选择"
+        @change="mapFieldChange"
+        clearable
+      >
+        <el-option-group v-for="group in getAllFields" :key="group.label" :label="group.label">
+          <el-option
+            v-for="item in group.options"
+            :key="item.filedName"
+            :label="item.fliedTitle"
+            :value="item.filedName"
+            :disabled="!!item.disabled"
+          />
+        </el-option-group>
+      </el-select>
+      <el-button v-if="props.index != 0" circle type="danger" @click="emits('remove', props.index)"
+        ><el-icon><CircleClose /></el-icon
+      ></el-button>
+    </el-form-item>
+  </el-col>
+
+  <!-- 脚本设置 -->
+  <el-col :span="24" v-if="item.mapField">
+    <template v-for="(sitem, idx) in item.scripts">
+      <el-form-item :label="'脚本' + (idx ? idx + 1 : '')">
+        <el-row>
+          <el-col>
+            <el-select
+              style="width: 220px"
+              v-model="sitem.scriptName"
+              @change="(e) => scriptChange(sitem, e)"
+              clearable
+            >
+              <el-option
+                v-for="item in getScriptList"
+                :key="item.srciptName"
+                :value="item.srciptName"
+                :label="item.srciptName"
+              ></el-option>
+            </el-select>
+            <span>
+              <el-button v-if="idx == 0" @click="addScript" type="primary" circle
+                ><el-icon><Plus /></el-icon
+              ></el-button>
+              <el-button v-if="idx != 0" @click="removeScript(idx)" type="danger" circle
+                ><el-icon><Minus /></el-icon
+              ></el-button>
+            </span>
+          </el-col>
+          <el-col v-if="sitem.scriptName" class="mt-1">
+            <el-input
+              type="textarea"
+              style="width: 220px"
+              disabled
+              rows="3"
+              v-model="sitem.content"
+            ></el-input>
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </template>
+  </el-col>
+</template>
+
+<script lang="ts" setup>
+import { useExcelChangeStore } from '@/stores/excel'
+import { Plus, Minus, CircleClose } from '@element-plus/icons-vue'
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+
+const props = defineProps<{ item?: any; index: number }>()
+const emits = defineEmits(['remove'])
+const excelChangeStore = useExcelChangeStore()
+const { getAllFields, getScriptList } = storeToRefs(excelChangeStore)
+
+const scriptChange = (sitem, e) => {
+  if (e) {
+    sitem.content = getScriptList.value.find((item) => item.srciptName == e)?.scriptContent
+  } else {
+    sitem.content = ''
+  }
+}
+
+const mapFieldChange = (e) => {
+  if (e) {
+    getAllFields.value.some((items) => {
+      return items.options.some((item) => {
+        if (item.filedName == e) {
+          props.item.orderFiled = item
+          return true
+        }
+        return false
+      })
+    })
+  } else {
+    props.item.orderFiled = null
+  }
+}
+
+const removeScript = (index: number) => {
+  props.item.scripts.splice(index, 1)
+}
+const addScript = () => {
+  props.item.scripts.push({
+    content: '',
+    scriptName: ''
+  })
+}
+
+watch(
+  () => props.item.mapField,
+  (val) => {
+    // 如果有值，添加脚本
+    if (val && props.item.scripts.length == 0) {
+      props.item.scripts.push({
+        content: '',
+        scriptName: ''
+      })
+    }
+  }
+)
+</script>
+<style lang="scss" scoped></style>

src/views/order/orderChange/components/configForm.vue

 <template>
-    <div>
-        123
-    </div>
-</template>
\ No newline at end of file
+  <el-scrollbar max-height="350px">
+    <el-form size="small" label-width="60px">
+      <template v-for="(item, index) in configList" :key="item.time">
+        <ConfigFormItem :item="item" :index="index" @remove="removeMapField" />
+        <el-divider v-if="index + 1 != configList.length"> 第{{ index + 2 }}映射字段 </el-divider>
+      </template>
+    </el-form>
+  </el-scrollbar>
+  <el-row type="flex" justify="center">
+    <el-button size="small" type="primary" @click="emits('confirm', configList)">确认</el-button>
+    <el-button size="small" type="primary" @click="addFormItem">添加字段</el-button>
+    <el-button size="small" @click="emits('cancel')">取消</el-button>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import type { Recordable } from '@/types/global'
+import ConfigFormItem from './ConfigFormItem.vue'
+import { cloneDeep } from 'loadsh'
+import { ElMessage } from 'element-plus'
+import { apiGetOrderField, apiGetScript, getVariableField } from '@/api/excel'
+import { useExcelChangeStore } from '@/stores/excel'
+
+/**
+ * 数据结构
+ * {templateFileId: '', confs: [{title: '',orderFiledConfs: [{mapField: '',orderFiled: {}, scripts: {}}], templateFileId: ''}]}
+ */
+const props = defineProps<{ title: string; currentRow: Recordable; currentConf: Recordable }>()
+const emits = defineEmits(['cancel', 'confirm'])
+const excelChangeStore = useExcelChangeStore()
+const configList = ref<Recordable[]>([])
+
+const getOrderVariableField = async () => {
+  const { data } = await getVariableField(props.currentRow.excelOrderId)
+  if (data.code != 200) {
+    ElMessage.warning(data.message)
+  }
+  excelChangeStore.setVariableField(data.result || [])
+}
+
+// 添加映射字段表单对象
+const addFormItem = () => {
+  configList.value.push({
+    time: Date.now(),
+    mapField: '',
+    orderFiled: {},
+    scripts: []
+  })
+}
+const removeMapField = (index: number) => {
+  configList.value.splice(index, 1)
+}
+
+const getScriptList = async () => {
+  const { data } = await apiGetScript()
+  excelChangeStore.setScriptList(data.result)
+}
+const getOrderFields = async () => {
+  const { data } = await apiGetOrderField()
+  excelChangeStore.setOrderFieldList(data.result)
+}
+
+// 监听选中行变化
+watch(
+  () => props.currentRow.excelOrderId,
+  (val) => {
+    getOrderVariableField()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.currentConf.title,
+  (val) => {
+    console.log('watch--props.currentConf.title', val, props.currentConf)
+    configList.value = cloneDeep(props.currentConf).orderFiledConfs.map((item, i) => {
+      item.time = Date.now() + i
+      return item
+    })
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  configList,
+  (val) => {
+    console.log('configList----', val)
+    excelChangeStore.setUsedFieldList(val)
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  getScriptList()
+  getOrderFields()
+})
+</script>