改变变量字段选择的方式。修改为输入方式

src/stores/excel.ts

+import type { Recordable } from '@/types/global'
 import { defineStore } from 'pinia'
 
 type StoreState = {
@@ -89,54 +90,47 @@ export const useExcelStore = defineStore('excelStore', {
   }
 })
 
+type ExcelChangeStore = {
+  allMapConfigs: Recordable
+  scriptList: Recordable[]
+  orderFieldList: Recordable[]
+  usedFieldList: Recordable[]
+}
+
 export const useExcelChangeStore = defineStore('excelChangeStore', {
-  state: () => ({
+  state: (): ExcelChangeStore => ({
     allMapConfigs: {}, // 缓存当前这条数据的所有映射关系
     scriptList: [], // 脚本
     orderFieldList: [], // 订单字段
-    variableField: [], // 后端获取的变量字段
     usedFieldList: [] // 当前编辑column使用过的映射字段
   }),
   getters: {
-    getAllMapConfigs(): any {
+    getAllMapConfigs(): Recordable {
       return this.allMapConfigs
     },
     getScriptList(): any {
       return this.scriptList
     },
     getEffectConfigs(): any[] {
+      // 获取已经使用的config，用于禁用已经选择过的映射字段
       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)
+            res.push(...this.allMapConfigs[key].orderFiledConfs.filter((item) => item.variable))
           }
         }
       }
       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
-          })
-        }
-      ]
+      return this.orderFieldList.map((item) => {
+        this.getEffectConfigs.includes(item.filedName)
+          ? (item.disabled = true)
+          : (item.disabled = false)
+        return item
+      })
     }
   },
   actions: {
@@ -152,9 +146,6 @@ export const useExcelChangeStore = defineStore('excelChangeStore', {
     setOrderFieldList(list: any) {
       this.orderFieldList = list
     },
-    setVariableField(list: any) {
-      this.variableField = list
-    },
     setUsedFieldList(list: any) {
       this.usedFieldList = list
     }

src/views/order/orderChange/OrderChange.vue

@@ -237,7 +237,7 @@ const showPopover = (e: any, title: string) => {
         orderFiledConfs: [
           {
             mapField: '',
-            orderFiled: {},
+            orderFiled: null,
             scripts: []
           }
         ],
@@ -259,9 +259,23 @@ watch([detailVisible, popoverVisible], (val) => {
 
 /** 确认字段映射及脚本的配置 */
 const confirmConfig = (configList: any) => {
+  // 便利一下是否有变量字段
   excelChangeStore.setSingleFieldMap({
     ...currentColConf,
-    orderFiledConfs: cloneDeep(configList.filter((v) => !!v.mapField))
+    orderFiledConfs: cloneDeep(
+      configList
+        .map((item) => {
+          if (item.mapField && item?.isVariable) {
+            item.orderFiled = {
+              fliedTitle: item.mapField,
+              filedName: item.mapField,
+              variable: true
+            }
+          }
+          return item
+        })
+        .filter((v) => !!v.mapField)
+    )
   })
   // 关闭popover
   popoverVisible.value = false

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

@@ -3,24 +3,31 @@
   <el-col>
     <el-form-item label="对应字段" prop="mapField">
       <el-select
+        v-if="!isVariable"
         v-model="item.mapField"
-        style="width: 220px"
+        style="width: 160px"
         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-option
+          v-for="item in getAllFields"
+          :key="item.filedName"
+          :label="item.fliedTitle"
+          :value="item.filedName"
+          :disabled="!!item.disabled"
+        />
       </el-select>
-      <el-button v-if="props.index != 0" circle type="danger" @click="emits('remove', props.index)"
+      <el-input v-else v-model="item.mapField" style="width: 160px" />
+      <el-checkbox class="ml-1" v-model="isVariable" @change="checkboxChange">是变量</el-checkbox>
+      <el-button
+        class="ml-1"
+        v-if="props.index != 0"
+        plain
+        circle
+        type="danger"
+        @click="emits('remove', props.index)"
         ><el-icon><CircleClose /></el-icon
       ></el-button>
     </el-form-item>
@@ -45,11 +52,11 @@
                 :label="item.srciptName"
               ></el-option>
             </el-select>
-            <span>
+            <span class="ml-1">
               <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-button v-if="idx != 0" @click="removeScript(idx)" type="danger" plain circle
                 ><el-icon><Minus /></el-icon
               ></el-button>
             </span>
@@ -73,13 +80,15 @@
 import { useExcelChangeStore } from '@/stores/excel'
 import { Plus, Minus, CircleClose } from '@element-plus/icons-vue'
 import { storeToRefs } from 'pinia'
-import { watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{ item?: any; index: number }>()
 const emits = defineEmits(['remove'])
 const excelChangeStore = useExcelChangeStore()
 const { getAllFields, getScriptList } = storeToRefs(excelChangeStore)
 
+const isVariable = ref(false)
+
 const scriptChange = (sitem, e) => {
   if (e) {
     sitem.content = getScriptList.value.find((item) => item.srciptName == e)?.scriptContent
@@ -91,19 +100,23 @@ const scriptChange = (sitem, e) => {
 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
-      })
+      if (items.filedName == e) {
+        props.item.orderFiled = items
+        return true
+      }
+      return false
     })
   } else {
     props.item.orderFiled = null
   }
 }
 
+const checkboxChange = (e) => {
+  // 设置一个属性
+  props.item.isVariable = isVariable.value
+  props.item.mapField = ''
+  props.item.orderFiled = null
+}
 const removeScript = (index: number) => {
   props.item.scripts.splice(index, 1)
 }
@@ -114,6 +127,11 @@ const addScript = () => {
   })
 }
 
+onMounted(() => {
+  console.log('onmounted')
+  isVariable.value = !!props.item.orderFiled?.variable
+})
+
 watch(
   () => props.item.mapField,
   (val) => {

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

@@ -32,14 +32,6 @@ 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({
@@ -62,19 +54,10 @@ const getOrderFields = async () => {
   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
@@ -88,7 +71,6 @@ watch(
 watch(
   configList,
   (val) => {
-    console.log('configList----', val)
     excelChangeStore.setUsedFieldList(val)
   },
   { deep: true }