feat: 调整report自定义字段逻辑

src/utils/axios.ts

@@ -8,23 +8,39 @@ interface codeMessage {
   [key: number]: string
 }
 
-const CODE_MESSAGE: codeMessage = {
-  200: '服务器成功返回请求的数据。',
-  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-  401: '用户没有权限（令牌、用户名、密码错误）。',
-  403: '用户得到授权，但是访问是被禁止的。',
-  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
-  406: '请求的格式不可得。',
-  410: '请求的资源被永久删除，且不会再得到的。',
-  422: '当创建一个对象时，发生一个验证错误。',
-  456: 'refreshToken过期',
-  457: 'accessToken过期',
-  500: '服务器发生错误，请检查服务器。',
-  502: '网关错误。',
-  503: '服务不可用，服务器暂时过载或维护。',
-  504: '网关超时。'
-}
+// const CODE_MESSAGE: codeMessage = {
+//   200: '服务器成功返回请求的数据。',
+//   400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+//   401: '用户没有权限（令牌、用户名、密码错误）。',
+//   403: '用户得到授权，但是访问是被禁止的。',
+//   404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+//   406: '请求的格式不可得。',
+//   410: '请求的资源被永久删除，且不会再得到的。',
+//   422: '当创建一个对象时，发生一个验证错误。',
+//   456: 'refreshToken过期',
+//   457: 'accessToken过期',
+//   500: '服务器发生错误，请检查服务器。',
+//   502: '网关错误。',
+//   503: '服务不可用，服务器暂时过载或维护。',
+//   504: '网关超时。'
+// }
 
+const CODE_MESSAGE: codeMessage = {
+  200: 'The server successfully returned the requested data.',
+  400: 'The request was invalid; the server did not create or modify any data.',
+  401: 'Unauthorized: invalid token, username, or password.',
+  403: 'Access is forbidden despite valid authentication.',
+  404: 'The requested resource does not exist; no action was taken by the server.',
+  406: 'The requested format is not available.',
+  410: 'The requested resource has been permanently deleted and will not be available again.',
+  422: 'A validation error occurred while creating an object.',
+  456: 'Refresh token expired.',
+  457: 'Access token expired.',
+  500: 'An internal server error occurred. Please check the server.',
+  502: 'Bad gateway.',
+  503: 'Service unavailable: the server is temporarily overloaded or under maintenance.',
+  504: 'Gateway timeout.'
+};
 class HttpAxios {
   instance: AxiosInstance
   timeout = 30000

src/views/Report/src/components/ReportDetail/src/ReportDetail.vue

@@ -28,6 +28,9 @@ const handleFilterData = (filterData, name) => {
       curData.value = ''
     } else if (item.data_type === 'number' || item.data_type === 'date') {
       curData.value = []
+    } else if (item.data_type === 'select') {
+      curData.options = item.options
+      curData.value = ''
     }
     return {
       label: item.label,
@@ -123,10 +126,12 @@ const applyNewColumn = () => {
             v-if="item.type === 'string'"
             placeholder="Please enter..."
             v-model="item.value"
+            clearable
           ></el-input>
           <el-select
             v-else-if="item.type === 'select'"
             v-model="item.value"
+            clearable
             placeholder="Please select..."
           >
             <el-option
@@ -142,6 +147,7 @@ const applyNewColumn = () => {
               class="no-spinner"
               type="number"
               v-model="item.value[0]"
+              clearable
             ></el-input>
             -
             <el-input
@@ -149,6 +155,7 @@ const applyNewColumn = () => {
               class="no-spinner"
               type="number"
               v-model="item.value[1]"
+              clearable
             ></el-input>
           </div>
           <div v-if="item.type === 'date'" style="display: flex; gap: 4px; align-items: center">
@@ -159,25 +166,10 @@ const applyNewColumn = () => {
               start-placeholder="Start date"
               end-placeholder="End date"
               style="height: 32px"
+              clearable
               value-format="MM/DD/YYYY"
               :format="formatDate"
             />
-
-            <!-- <el-date-picker
-              v-model="item.value[0]"
-              type="date"
-              placeholder="Pick a Date"
-              :format="formatDate"
-              valueFormat="MM/DD/YYYY"
-            />
-            -
-            <el-date-picker
-              v-model="item.value[1]"
-              type="date"
-              placeholder="Pick a Date"
-              :format="formatDate"
-              valueFormat="MM/DD/YYYY"
-            /> -->
           </div>
         </div>
       </div>

src/views/Report/src/components/ReportDetail/src/components/FieldsTable.vue

@@ -96,7 +96,7 @@ const getTableData = (isPageChange?: boolean) => {
   tableLoadingTable.value = true
   let queryParams = {}
   props.filterData.forEach((item) => {
-    if (item.type === 'string') {
+    if (item.type === 'string' || item.type === 'select') {
       queryParams[item.field] = item.value
     } else if (item.type === 'number' || item.type === 'date') {
       queryParams[item.field] = item.value
@@ -122,6 +122,7 @@ const getTableData = (isPageChange?: boolean) => {
         allTable.value.columns = handleColumns(res.data.tableColumns)
 
         tmpSearch = res.data.tmp_search
+        tmpMapping = res.data.tmp_mapping
 
         reportName.value = res.data.reportName
 
@@ -135,7 +136,6 @@ const getTableData = (isPageChange?: boolean) => {
     .finally(() => {
       nextTick(() => {
         tableRef.value && autoWidth(tableData.value, tableRef.value)
-
         tableLoadingTable.value = false
       })
     })
@@ -147,6 +147,7 @@ const handleSearch = () => {
 }
 
 let tmpSearch = ''
+let tmpMapping = ''
 // 下载
 const getExportTableData = async (type: string, column: any) => {
   if (column) {
@@ -161,16 +162,22 @@ const getExportTableData = async (type: string, column: any) => {
     column = newColumns
   }
   exportLoading.value = true
-  await $api.getReportAllTableData({ tmp_search: tmpSearch }).then((res: any) => {
-    if (res.code === 200) {
-      allTable.value.data = res.data.Data || []
-      if (allTable.value.data.length > 20000) {
-        type = 'csv'
+  await $api
+    .getReportAllTableData({ tmp_search: tmpSearch, tmp_mapping: tmpMapping })
+    .then((res: any) => {
+      if (res.code === 200) {
+        allTable.value.data = res.data.Data || []
+        if (allTable.value.data.length > 20000) {
+          type = 'csv'
+        }
+      } else if (res.code === 500) {
+        ElMessage.error(res.data.msg)
       }
-    } else if (res.code === 500) {
-      ElMessage.error(res.data.msg)
-    }
-  })
+    })
+    .catch((err: any) => {
+      exportLoading.value = false
+      return
+    })
   await nextTick(async () => {
     await autoWidth(allTable.value, allTableRef.value)
   })

src/views/TemplateManagement/src/components/CreateReportTemplate/src/CreateReportTemplate.vue

@@ -3,9 +3,7 @@ import { useRouter, useRoute } from 'vue-router'
 import partyIDSelect from './components/partyIDSelect.vue'
 import GroupNameSelect from './components/GroupNameSelect.vue'
 import AccountSelect from './components/AccountSelect.vue'
-import { VueDraggable } from 'vue-draggable-plus'
-import AdjustmentField from './components/AdjustmentField.vue'
-import { cloneDeep } from 'lodash'
+import ReportFieldsConfiguration from './components/ReportFieldsConfiguration.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -30,6 +28,7 @@ onMounted(() => {
           reportLevel: data.reportLevel,
           reportDescription: data.reportDescription
         }
+        oldReportLevel.value = data.reportLevel
         fieldsList.value = data.reportFields.map((item) => {
           return {
             ...item,
@@ -79,8 +78,8 @@ interface Field {
 const fieldsList = ref<Field[]>([])
 const levelOptions = [
   {
-    label: 'Shipment level',
-    value: 'Shipment level'
+    label: 'Shipment Level',
+    value: 'Shipment Level'
   },
   {
     label: 'Container Level',
@@ -97,199 +96,6 @@ const generate8DigitUnique = () => {
   return Math.floor(10000000 + Math.random() * 90000000).toString()
 }
 
-const changeFieldConfig = (state: any, field: string, index: number, key: string) => {
-  if (!state) return
-  fieldsList.value.forEach((item) => {
-    if (item.field === field) {
-      item[key] = false
-    }
-  })
-  const firstMatch = fieldsList.value[index]
-  if (firstMatch) {
-    firstMatch[key] = true
-  }
-}
-
-const handleDeleteField = (index: number, uniqueId: string) => {
-  fieldsList.value.splice(index, 1)
-
-  Object.keys(copyFieldsList.value).forEach((key) => {
-    copyFieldsList.value[key] = copyFieldsList.value[key].filter(
-      (item) => item.uniqueId !== uniqueId
-    )
-  })
-}
-const copyFieldsList = ref({})
-
-const fieldMappingVisible = ref(false)
-const curFieldItem = ref()
-const mappingData = ref([
-  {
-    system: '',
-    converted: ''
-  }
-])
-const handleMappingField = (index: number) => {
-  curFieldItem.value = fieldsList.value[index]
-  mappingData.value = curFieldItem.value.mapping
-    ? cloneDeep(curFieldItem.value.mapping)
-    : [
-        {
-          system: '',
-          converted: ''
-        }
-      ]
-  fieldMappingVisible.value = true
-}
-const handleDeleteMappingField = (index: number) => {
-  mappingData.value.splice(index, 1)
-}
-const handleAddMapping = () => {
-  curFieldItem.value.mapping = mappingData.value
-  clearMappingData()
-  fieldMappingVisible.value = false
-}
-const handleAddMappingItem = () => {
-  mappingData.value.push({
-    system: '',
-    converted: ''
-  })
-}
-const clearMappingData = () => {
-  mappingData.value = [
-    {
-      system: '',
-      converted: ''
-    }
-  ]
-}
-
-const handleCopyField = (index: number) => {
-  const curField = cloneDeep(fieldsList.value[index])
-  curField.displayName = `${curField.displayName} (Copy)`
-  curField.isFilter = false
-  curField.isSort = false
-  curField.uniqueId = generate8DigitUnique()
-  if (copyFieldsList.value[curField.field]) {
-    copyFieldsList.value[curField.field].push(cloneDeep(curField))
-  } else {
-    copyFieldsList.value[curField.field] = [cloneDeep(curField)]
-  }
-  fieldsList.value.splice(index + 1, 0, cloneDeep(curField))
-}
-
-const AdjustmentFieldRef = ref()
-// 打开定制表格弹窗
-const handleCustomizeColumns = () => {
-  if (!infoData.value.reportLevel) {
-    ElMessage.warning('Please select the report level.')
-    return
-  }
-  const params = {
-    serial_no: '',
-    level: infoData.value.reportLevel
-  }
-  const seen = new Set()
-  const uniqueArray = fieldsList.value.filter((item) => {
-    if (seen.has(item.field)) {
-      return false // 已存在，跳过
-    }
-    seen.add(item.field)
-    return true // 第一次出现，保留
-  })
-
-  AdjustmentFieldRef.value.openDialog(
-    params,
-    -220,
-    'Drag item over to this selection or click "add" icon to show the field on report template list',
-    uniqueArray
-  )
-}
-
-const newFieldInfo = ref<{
-  name: string
-  fieldType: 'Blank' | 'Fixed Value'
-  value: string
-}>({
-  name: '',
-  fieldType: 'Blank',
-  value: ''
-})
-const addNewFieldVisible = ref(false)
-// 添加新字段
-const handleAddNewField = () => {
-  addNewFieldVisible.value = true
-}
-const handleFieldTypeChange = () => {
-  newFieldInfo.value.value = ''
-}
-const addNewField = () => {
-  if (!newFieldInfo.value.name?.trim()) {
-    ElMessage.warning('Please enter the new field name.')
-    return
-  }
-
-  if (newFieldInfo.value.fieldType === 'Fixed Value' && !newFieldInfo.value.value?.trim()) {
-    ElMessage.warning('Please enter the fixed value.')
-    return
-  }
-  fieldsList.value.unshift({
-    uniqueId: generate8DigitUnique(),
-    field: newFieldInfo.value.name,
-    title: newFieldInfo.value.name,
-    displayName: newFieldInfo.value.name,
-    value: newFieldInfo.value.value,
-    fieldType: 'Custom',
-    groupName: '',
-    isFilter: false,
-    isSort: false
-  })
-  clearNewFieldData()
-  addNewFieldVisible.value = false
-}
-const clearNewFieldData = () => {
-  newFieldInfo.value = {
-    name: '',
-    fieldType: 'Blank',
-    value: ''
-  }
-}
-
-// 调整应用字段
-const handleApplay = (data: any) => {
-  const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
-  fieldsList.value = data.map((item: any) => {
-    return {
-      ...item,
-      label: item.label,
-      title: item.title || item.label,
-      displayName: item.displayName || item.label,
-      isFilter: !!item.isFilter,
-      isSort: !!item.isSort,
-      uniqueId: item.uniqueId || generate8DigitUnique()
-    }
-  })
-  fieldsList.value = [...customizeData, ...fieldsList.value]
-
-  const validFields = new Set(fieldsList.value.map((item) => item.field))
-  for (const field in copyFieldsList.value) {
-    if (!validFields.has(field)) {
-      delete copyFieldsList.value[field]
-    }
-  }
-
-  // === 第三步：从后往前插入副本（不修改原始项）===
-  for (let i = fieldsList.value.length - 1; i >= 0; i--) {
-    const field = fieldsList.value[i].field
-    const copies = copyFieldsList.value[field]
-
-    if (copies?.length) {
-      // 插入副本到原项后面
-      fieldsList.value.splice(i + 1, 0, ...copies)
-    }
-  }
-}
-
 const accessControlType = ref('All Users')
 const detailRef: Ref<HTMLElement | null> = ref(null)
 
@@ -314,13 +120,22 @@ const changeAccount = (val: string[]) => {
   specificRoles.value.systemAccount = val
 }
 
-const fieldLoading = ref(false)
-const handleRightRemove = () => {}
-
 const handleCancel = () => {
   router.push('/template-management')
 }
 
+const fieldsConfigurationRef = ref()
+const oldReportLevel = ref('')
+const changeLevel = (val: string) => {
+  fieldsConfigurationRef.value.changeReportLevel(val, oldReportLevel.value)
+}
+const cancelChangeLevel = (val: string) => {
+  infoData.value.reportLevel = val
+}
+const changeOldLevel = (val: string) => {
+  oldReportLevel.value = val
+}
+
 const handlePageSave = () => {
   let verified = true
   if (!infoData.value.reportName.trim()) {
@@ -358,13 +173,12 @@ const handlePageSave = () => {
     party_ids: specificRoles.value.partyId || [],
     group_names: specificRoles.value.groupName || [],
     system_account: specificRoles.value.systemAccount || [],
-    fieldsList: fieldsList.value
+    fieldsList: fieldsConfigurationRef.value.getFieldsList()
   }
   let serial_no = ''
   if (route.query.copy !== 't' && route.query.serial_no) {
     serial_no = String(route.query.serial_no)
   }
-  console.log(data, 'save Data')
   $api
     .saveNewReportTemplate({ ...data, serial_no })
     .then((res: any) => {
@@ -412,7 +226,11 @@ const handlePageSave = () => {
                 <span style="color: var(--color-danger)">*</span>
                 <span>Report Level</span>
               </div>
-              <el-select v-model="infoData.reportLevel" placeholder="Please enter...">
+              <el-select
+                v-model="infoData.reportLevel"
+                @change="changeLevel"
+                placeholder="Please enter..."
+              >
                 <el-option
                   v-for="item in levelOptions"
                   :label="item.label"
@@ -435,116 +253,13 @@ const handlePageSave = () => {
           </div>
         </div>
       </div>
-      <div class="fields-configuration template-box">
-        <div class="header">
-          <span>Report Fields Configuration</span>
-
-          <div class="right-option">
-            <el-button
-              class="el-button--dark"
-              @click="handleAddNewField"
-              style="width: 148px; padding-top: 11px"
-            >
-              <span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
-              <span>Add New Field</span>
-            </el-button>
-            <el-button
-              v-if="fieldsList.length > 0"
-              class="el-button--dark"
-              @click="handleCustomizeColumns()"
-              style="width: 110px; padding-top: 11px"
-            >
-              <span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
-              <span>Select Field</span>
-            </el-button>
-          </div>
-        </div>
-        <div class="content-box">
-          <div class="empty-box" v-if="fieldsList.length === 0">
-            <el-button class="el-button--dark" @click="handleCustomizeColumns">
-              <span class="font_family icon-icon_add_b"></span>Add/Edit Field
-            </el-button>
-            <p>No field selected. click “Add Field” to get started.</p>
-          </div>
-          <div class="fields-list" v-else>
-            <VueDraggable
-              v-vloading="fieldLoading"
-              v-model="fieldsList"
-              class="column-list"
-              ghost-class="ghost-column"
-              :forceFallback="true"
-              fallback-class="fallback-class"
-              group="customizeColumns"
-              item-key="uniqueId"
-              @end="handleRightRemove"
-              handle=".handle-draggable"
-            >
-              <div
-                class="field-item"
-                v-for="(fieldItem, index) in fieldsList"
-                :key="fieldItem.uniqueId"
-              >
-                <span
-                  class="font_family icon-icon_dragsort__b draggable-icon handle-draggable"
-                  style="margin-right: 12px; font-size: 16px"
-                ></span>
-                <div class="label handle-draggable">
-                  <span style="font-weight: 700">[{{ fieldItem.field }}]</span>
-                  <span style="margin-left: 8px">{{ fieldItem.title }}</span>
-                </div>
-                <el-input
-                  :id="fieldItem.uniqueId"
-                  :name="fieldItem.uniqueId"
-                  class="display-name"
-                  v-model="fieldItem.displayName"
-                  placeholder="Display Name in Report"
-                ></el-input>
-                <div class="actions">
-                  <div class="checkbox-group">
-                    <el-checkbox
-                      :disabled="
-                        fieldItem.fieldType !== 'System' ||
-                        fieldItem.groupName === 'Container Status' ||
-                        fieldItem.groupName === 'Milestone'
-                      "
-                      v-model="fieldItem.isFilter"
-                      @change="changeFieldConfig($event, fieldItem.field, index, 'isFilter')"
-                      >Filter</el-checkbox
-                    >
-                    <el-checkbox
-                      :disabled="fieldItem.fieldType !== 'System'"
-                      v-model="fieldItem.isSort"
-                      @change="changeFieldConfig($event, fieldItem.field, index, 'isSort')"
-                      >Sort</el-checkbox
-                    >
-                  </div>
-                  <div class="action-icon">
-                    <span
-                      style="padding: 5px"
-                      v-if="
-                        fieldItem.fieldType === 'System' && fieldItem.isFieldDataMapping === 't'
-                      "
-                      @click="handleMappingField(index)"
-                      class="font_family icon-icon_convert_b"
-                    ></span>
-                    <span v-else style="width: 20px"></span>
-                    <span
-                      style="padding: 5px"
-                      @click="handleCopyField(index)"
-                      class="font_family icon-icon_clone_b"
-                    ></span>
-                    <span
-                      style="padding: 5px 7px"
-                      @click="handleDeleteField(index, fieldItem.uniqueId)"
-                      class="font_family icon-icon_delete_b"
-                    ></span>
-                  </div>
-                </div>
-              </div>
-            </VueDraggable>
-          </div>
-        </div>
-      </div>
+      <ReportFieldsConfiguration
+        :report-level="infoData.reportLevel"
+        :pageData="fieldsList"
+        @confirm-change-level="changeOldLevel"
+        @cancel-change-level="cancelChangeLevel"
+        ref="fieldsConfigurationRef"
+      ></ReportFieldsConfiguration>
       <div class="report-access-control template-box">
         <div class="header">Report Access Control</div>
         <div class="content-box">
@@ -614,119 +329,6 @@ const handlePageSave = () => {
         </div>
       </div>
     </div>
-
-    <AdjustmentField @apply="handleApplay" ref="AdjustmentFieldRef" />
-    <el-dialog
-      class="add-new-field-dialog"
-      title="Add New Field"
-      v-model="addNewFieldVisible"
-      @closed="clearNewFieldData"
-      width="480"
-    >
-      <div>
-        <div class="field-item">
-          <div class="label">
-            <span class="required-symbol">*</span>
-            <span>New Field Name</span>
-          </div>
-          <el-input placeholder="Please enter..." v-model="newFieldInfo.name"></el-input>
-        </div>
-        <div class="field-item field-value">
-          <div class="label">
-            <span class="required-symbol">*</span>
-            <span>Field Value</span>
-          </div>
-          <el-radio-group v-model="newFieldInfo.fieldType" @change="handleFieldTypeChange">
-            <el-radio label="Blank">Blank</el-radio>
-            <el-radio label="Fixed Value">Fixed Value</el-radio>
-          </el-radio-group>
-        </div>
-        <div class="field-item" v-if="newFieldInfo.fieldType === 'Fixed Value'">
-          <div class="label">
-            <span class="required-symbol">*</span>
-            <span>Fixed Value</span>
-          </div>
-          <el-input placeholder="Please enter..." v-model="newFieldInfo.value"></el-input>
-        </div>
-      </div>
-      <template #footer>
-        <el-button
-          style="height: 40px; width: 115px"
-          class="cancel-btn"
-          type="default"
-          @click="addNewFieldVisible = false"
-          >Cancel</el-button
-        >
-        <el-button style="height: 40px; width: 120px" class="el-button--dark" @click="addNewField"
-          >Apply</el-button
-        >
-      </template>
-    </el-dialog>
-    <el-dialog
-      class="field-mapping-dialog"
-      v-model="fieldMappingVisible"
-      title="Mapping (Field: Final Destination)"
-      width="800"
-      @close="clearMappingData"
-    >
-      <div>
-        <div class="mapping-list">
-          <div class="label">
-            <div class="left-label">
-              <span style="color: var(--color-danger)">*</span>
-              <span>System Value</span>
-            </div>
-            <div class="right-label">
-              <span style="color: var(--color-danger)">*</span>
-              <span>System Value</span>
-            </div>
-          </div>
-          <div style="max-height: 380px; overflow-y: auto">
-            <div class="list-item" v-for="(item, index) in mappingData" :key="index">
-              <div class="left-system-value">
-                <el-input placeholder="Please enter..." clearable v-model="item.system"></el-input>
-              </div>
-              <div class="right-converted-value">
-                <el-input
-                  placeholder="Please enter..."
-                  clearable
-                  v-model="item.converted"
-                ></el-input>
-              </div>
-              <div class="delete-icon">
-                <span
-                  @click="handleDeleteMappingField(index)"
-                  class="font_family icon-icon_delete_b"
-                ></span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <el-button
-        class="el-button--text"
-        @click="handleAddMappingItem"
-        style="height: 32px; margin-top: 8px; padding: 8px"
-      >
-        <span class="font_family icon-icon_add_b" style="color: var(--color-theme)"></span>
-        <span style="color: var(--color-theme)">Add Mapping</span>
-      </el-button>
-      <template #footer>
-        <el-button
-          style="height: 40px; width: 115px"
-          class="cancel-btn"
-          type="default"
-          @click="fieldMappingVisible = false"
-          >Cancel</el-button
-        >
-        <el-button
-          style="height: 40px; width: 120px"
-          class="el-button--dark"
-          @click="handleAddMapping"
-          >Apply</el-button
-        >
-      </template>
-    </el-dialog>
   </div>
 </template>
 

src/views/TemplateManagement/src/components/CreateReportTemplate/src/components/AdjustmentField.vue

@@ -137,8 +137,8 @@ const loading = ref(false)
 // 获取数据
 const getData = async (selectedList?: Array<any>) => {
   loading.value = true
-  let paramsData: any = { ...params.value }
-
+  let defaultValue = selectedList?.length && selectedList.length !== 0 ? false : true
+  let paramsData: any = { ...params.value, default: defaultValue }
   await $api.getReportFieldsConfiguration(paramsData).then((res: any) => {
     if (res.code === 200) {
       // allDataCopy就是所有的数据
@@ -150,6 +150,7 @@ const getData = async (selectedList?: Array<any>) => {
       // 右侧 当没有初始值时才需要从接口获取数据
       if (selectedList?.length && selectedList.length !== 0) {
         const newArr = selectedList.map((item: any) => {
+          handleAddSelect(item, false)
           return {
             ...item,
             label: item.title
@@ -206,7 +207,7 @@ const hoverAllIcon = ref('')
 // 右侧Icon的显隐
 const hoverSelectIcon = ref('')
 
-const handleAddSelect = (item: any) => {
+const handleAddSelect = (item: any, isNeedAdd = true) => {
   groupColumns.value.forEach((groupItem: any) => {
     groupItem.children.forEach((child: any, index: number) => {
       if (child.field === item.field) {
@@ -214,7 +215,7 @@ const handleAddSelect = (item: any) => {
       }
     })
   })
-  selectColumns.value.push(item)
+  isNeedAdd && selectColumns.value.push(item)
 }
 
 // 从左侧拖拽到右侧时，删除其他分组中相同的数据

src/views/TemplateManagement/src/components/CreateReportTemplate/src/components/ReportFieldsConfiguration.vue

@@ -0,0 +1,733 @@
+<script setup lang="ts">
+import AdjustmentField from './AdjustmentField.vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { cloneDeep } from 'lodash'
+
+const props = defineProps<{
+  reportLevel: string
+  pageData
+}>()
+
+interface Field {
+  uniqueId: string
+  field: string
+  title: string
+  displayName: string
+  fieldType: string
+  value?: string
+  isFilter: boolean
+  fieldLevel?: string
+  isSort: boolean
+  mapping?: { system: string; converted: string }[]
+  groupName: string
+  isFieldDataMapping?: string
+}
+const fieldsList = ref<Field[]>([])
+const addNewFieldVisible = ref(false)
+const fieldLoading = ref(false)
+
+const newFieldInfo = ref<{
+  name: string
+  fieldType: 'Blank' | 'Fixed Value'
+  value: string
+}>({
+  name: '',
+  fieldType: 'Blank',
+  value: ''
+})
+
+watch(
+  () => props.pageData,
+  (newVal) => {
+    if (newVal && Array.isArray(newVal)) {
+      fieldsList.value = cloneDeep(newVal)
+    } else {
+      fieldsList.value = []
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const emit = defineEmits<{
+  (e: 'cancelChangeLevel', value: string): void
+  (e: 'confirmChangeLevel', value: string): void
+}>()
+
+const changeReportLevel = (newVal: string, oldVal: string) => {
+  // 定义每种切换场景的配置
+  const scenarios: Record<string, Record<string, { message: string; levelsToClear: string[] }>> = {
+    'Item Level': {
+      'Container Level': {
+        message: 'If the Level value is "Item Level", the field will be cleared.',
+        levelsToClear: ['Item Level']
+      },
+      'Shipment Level': {
+        message:
+          'If the Level value is "Item Level" or "Container Level", the field will be cleared.',
+        levelsToClear: ['Item Level', 'Container Level']
+      }
+    },
+    'Container Level': {
+      'Shipment Level': {
+        message: 'If the Level value is "Container Level", the field will be cleared.',
+        levelsToClear: ['Container Level']
+      }
+    }
+  }
+
+  const scenario = scenarios[oldVal]?.[newVal]
+
+  if (!scenario) {
+    // 无特殊清理逻辑，直接确认变更
+    emit('confirmChangeLevel', newVal)
+    return
+  }
+
+  ElMessageBox.confirm(scenario.message, 'Prompt', {
+    confirmButtonText: 'Change',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+    confirmButtonClass: 'el-button--dark',
+    cancelButtonClass: 'el-button--default',
+    distinguishCancelAndClose: true
+  })
+    .then(() => {
+      // 用户确认：过滤字段并提交新值
+      fieldsList.value = fieldsList.value.filter(
+        (item) => !scenario.levelsToClear.includes(item.fieldLevel)
+      )
+      emit('confirmChangeLevel', newVal)
+    })
+    .catch(() => {
+      // 用户取消：回滚到旧值
+      emit('cancelChangeLevel', oldVal)
+    })
+}
+
+const handleAddNewField = () => {
+  addNewFieldVisible.value = true
+}
+const handleFieldTypeChange = () => {
+  newFieldInfo.value.value = ''
+}
+const addNewField = () => {
+  if (!newFieldInfo.value.name?.trim()) {
+    ElMessage.warning('Please enter the new field name.')
+    return
+  }
+
+  if (newFieldInfo.value.fieldType === 'Fixed Value' && !newFieldInfo.value.value?.trim()) {
+    ElMessage.warning('Please enter the fixed value.')
+    return
+  }
+  fieldsList.value.unshift({
+    uniqueId: generate8DigitUnique(),
+    field: newFieldInfo.value.name,
+    title: newFieldInfo.value.name,
+    displayName: newFieldInfo.value.name,
+    value: newFieldInfo.value.value,
+    fieldType: 'Custom',
+    groupName: '',
+    isFilter: false,
+    isSort: false
+  })
+  clearNewFieldData()
+  addNewFieldVisible.value = false
+}
+const clearNewFieldData = () => {
+  newFieldInfo.value = {
+    name: '',
+    fieldType: 'Blank',
+    value: ''
+  }
+}
+
+const changeFieldConfig = (state: any, field: string, index: number, key: string) => {
+  if (!state) return
+  fieldsList.value.forEach((item) => {
+    if (item.field === field) {
+      item[key] = false
+    }
+  })
+  const firstMatch = fieldsList.value[index]
+  if (firstMatch) {
+    firstMatch[key] = true
+  }
+}
+const AdjustmentFieldRef = ref()
+// 打开定制表格弹窗
+const handleCustomizeColumns = () => {
+  if (!props.reportLevel) {
+    ElMessage.warning('Please select the report level.')
+    return
+  }
+  const params = {
+    serial_no: '',
+    level: props.reportLevel
+  }
+  const seen = new Set()
+  const uniqueArray = fieldsList.value.filter((item) => {
+    if (seen.has(item.field)) {
+      return false // 已存在，跳过
+    }
+    seen.add(item.field)
+    return true // 第一次出现，保留
+  })
+
+  AdjustmentFieldRef.value.openDialog(
+    params,
+    -220,
+    'Drag item over to this selection or click "add" icon to show the field on report template list',
+    uniqueArray
+  )
+}
+
+const fieldMappingVisible = ref(false)
+const curFieldItem = ref()
+const mappingData = ref([
+  {
+    system: '',
+    converted: ''
+  }
+])
+const copyFieldsList = ref({})
+
+const handleMappingField = (index: number) => {
+  curFieldItem.value = fieldsList.value[index]
+  mappingData.value =
+    curFieldItem.value.mapping && curFieldItem.value.mapping.length
+      ? cloneDeep(curFieldItem.value.mapping)
+      : [
+          {
+            system: '',
+            converted: ''
+          }
+        ]
+  fieldMappingVisible.value = true
+}
+const handleDeleteField = (index: number, uniqueId: string) => {
+  fieldsList.value.splice(index, 1)
+
+  Object.keys(copyFieldsList.value).forEach((key) => {
+    copyFieldsList.value[key] = copyFieldsList.value[key].filter(
+      (item) => item.uniqueId !== uniqueId
+    )
+  })
+}
+
+// 前端使用的唯一标识符
+const generate8DigitUnique = () => {
+  return Math.floor(10000000 + Math.random() * 90000000).toString()
+}
+const handleCopyField = (index: number) => {
+  const curField = cloneDeep(fieldsList.value[index])
+  curField.displayName = `${curField.displayName} (Copy)`
+  curField.isFilter = false
+  curField.isSort = false
+  curField.uniqueId = generate8DigitUnique()
+  if (copyFieldsList.value[curField.field]) {
+    copyFieldsList.value[curField.field].push(cloneDeep(curField))
+  } else {
+    copyFieldsList.value[curField.field] = [cloneDeep(curField)]
+  }
+  fieldsList.value.splice(index + 1, 0, cloneDeep(curField))
+}
+
+const handleAddMapping = () => {
+  curFieldItem.value.mapping = mappingData.value
+  clearMappingData()
+  fieldMappingVisible.value = false
+}
+const handleAddMappingItem = () => {
+  mappingData.value.push({
+    system: '',
+    converted: ''
+  })
+}
+const clearMappingData = () => {
+  mappingData.value = [
+    {
+      system: '',
+      converted: ''
+    }
+  ]
+}
+
+// 调整应用字段
+const handleApplay = (data: any) => {
+  const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
+  fieldsList.value = data.map((item: any) => {
+    return {
+      ...item,
+      label: item.label,
+      title: item.title || item.label,
+      displayName: item.displayName || item.label,
+      isFilter: !!item.isFilter,
+      isSort: !!item.isSort,
+      uniqueId: item.uniqueId || generate8DigitUnique()
+    }
+  })
+  fieldsList.value = [...customizeData, ...fieldsList.value]
+
+  const validFields = new Set(fieldsList.value.map((item) => item.field))
+  for (const field in copyFieldsList.value) {
+    if (!validFields.has(field)) {
+      delete copyFieldsList.value[field]
+    }
+  }
+
+  // === 第三步：从后往前插入副本（不修改原始项）===
+  for (let i = fieldsList.value.length - 1; i >= 0; i--) {
+    const field = fieldsList.value[i].field
+    const copies = copyFieldsList.value[field]
+
+    if (copies?.length) {
+      // 插入副本到原项后面
+      fieldsList.value.splice(i + 1, 0, ...copies)
+    }
+  }
+}
+
+const handleDeleteMappingField = (index: number) => {
+  mappingData.value.splice(index, 1)
+}
+const getFieldsList = () => {
+  return fieldsList.value || []
+}
+
+defineExpose({
+  getFieldsList,
+  changeReportLevel
+})
+</script>
+
+<template>
+  <div class="fields-configuration template-box">
+    <div class="header">
+      <span>Report Fields Configuration</span>
+
+      <div class="right-option">
+        <el-button
+          class="el-button--dark"
+          @click="handleAddNewField"
+          style="width: 148px; padding-top: 11px"
+        >
+          <span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
+          <span>Add New Field</span>
+        </el-button>
+        <el-button
+          v-if="fieldsList.length > 0"
+          class="el-button--dark"
+          @click="handleCustomizeColumns()"
+          style="width: 110px; padding-top: 11px"
+        >
+          <span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
+          <span>Select Field</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="content-box">
+      <div class="empty-box" v-if="fieldsList.length === 0">
+        <el-button class="el-button--dark" @click="handleCustomizeColumns">
+          <span class="font_family icon-icon_add_b"></span>Add/Edit Field
+        </el-button>
+        <p>No field selected. click “Add Field” to get started.</p>
+      </div>
+      <div class="fields-list" v-else>
+        <VueDraggable
+          v-vloading="fieldLoading"
+          v-model="fieldsList"
+          class="column-list"
+          ghost-class="ghost-column"
+          :forceFallback="true"
+          fallback-class="fallback-class"
+          group="customizeColumns"
+          item-key="uniqueId"
+          handle=".handle-draggable"
+        >
+          <div
+            class="field-item"
+            v-for="(fieldItem, index) in fieldsList"
+            :key="fieldItem.uniqueId"
+          >
+            <span
+              class="font_family icon-icon_dragsort__b draggable-icon handle-draggable"
+              style="margin-right: 12px; font-size: 16px"
+            ></span>
+            <div class="label handle-draggable" style="line-height: 2.7">
+              <span style="font-weight: 700">[{{ fieldItem.field }}]</span>
+              <span style="margin-left: 8px">{{ fieldItem.title }}</span>
+            </div>
+            <el-input
+              :id="fieldItem.uniqueId"
+              :name="fieldItem.uniqueId"
+              class="display-name"
+              v-model="fieldItem.displayName"
+              placeholder="Display Name in Report"
+            ></el-input>
+            <div class="actions">
+              <div class="checkbox-group">
+                <el-checkbox
+                  :disabled="
+                    fieldItem.fieldType !== 'System' ||
+                    fieldItem.groupName === 'Container Status' ||
+                    fieldItem.groupName === 'Milestone'
+                  "
+                  v-model="fieldItem.isFilter"
+                  @change="changeFieldConfig($event, fieldItem.field, index, 'isFilter')"
+                  >Filter</el-checkbox
+                >
+                <el-checkbox
+                  :disabled="fieldItem.fieldType !== 'System'"
+                  v-model="fieldItem.isSort"
+                  @change="changeFieldConfig($event, fieldItem.field, index, 'isSort')"
+                  >Sort</el-checkbox
+                >
+              </div>
+              <div class="action-icon">
+                <span
+                  style="padding: 5px"
+                  v-if="fieldItem.fieldType === 'System' && fieldItem.isFieldDataMapping === 't'"
+                  @click="handleMappingField(index)"
+                  class="font_family icon-icon_convert_b"
+                ></span>
+                <span v-else style="width: 20px"></span>
+                <span
+                  style="padding: 5px"
+                  @click="handleCopyField(index)"
+                  class="font_family icon-icon_clone_b"
+                ></span>
+                <span
+                  style="padding: 5px 7px"
+                  @click="handleDeleteField(index, fieldItem.uniqueId)"
+                  class="font_family icon-icon_delete_b"
+                ></span>
+              </div>
+            </div>
+          </div>
+        </VueDraggable>
+      </div>
+    </div>
+  </div>
+
+  <AdjustmentField @apply="handleApplay" ref="AdjustmentFieldRef" />
+  <el-dialog
+    class="add-new-field-dialog"
+    title="Add New Field"
+    v-model="addNewFieldVisible"
+    @closed="clearNewFieldData"
+    width="480"
+  >
+    <div>
+      <div class="field-item">
+        <div class="label">
+          <span class="required-symbol">*</span>
+          <span>New Field Name</span>
+        </div>
+        <el-input placeholder="Please enter..." v-model="newFieldInfo.name"></el-input>
+      </div>
+      <div class="field-item field-value">
+        <div class="label">
+          <span class="required-symbol">*</span>
+          <span>Field Value</span>
+        </div>
+        <el-radio-group v-model="newFieldInfo.fieldType" @change="handleFieldTypeChange">
+          <el-radio label="Blank">Blank</el-radio>
+          <el-radio label="Fixed Value">Fixed Value</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="field-item" v-if="newFieldInfo.fieldType === 'Fixed Value'">
+        <div class="label">
+          <span class="required-symbol">*</span>
+          <span>Fixed Value</span>
+        </div>
+        <el-input placeholder="Please enter..." v-model="newFieldInfo.value"></el-input>
+      </div>
+    </div>
+    <template #footer>
+      <el-button
+        style="height: 40px; width: 115px"
+        class="cancel-btn"
+        type="default"
+        @click="addNewFieldVisible = false"
+        >Cancel</el-button
+      >
+      <el-button style="height: 40px; width: 120px" class="el-button--dark" @click="addNewField"
+        >Apply</el-button
+      >
+    </template>
+  </el-dialog>
+  <el-dialog
+    class="field-mapping-dialog"
+    v-model="fieldMappingVisible"
+    title="Mapping (Field: Final Destination)"
+    width="800"
+    @close="clearMappingData"
+  >
+    <div>
+      <div class="mapping-list">
+        <div class="label">
+          <div class="left-label">
+            <span style="color: var(--color-danger)">*</span>
+            <span>System Value</span>
+          </div>
+          <div class="right-label">
+            <span style="color: var(--color-danger)">*</span>
+            <span>System Value</span>
+          </div>
+        </div>
+        <div style="max-height: 380px; overflow-y: auto">
+          <div class="list-item" v-for="(item, index) in mappingData" :key="index">
+            <div class="left-system-value">
+              <el-input placeholder="Please enter..." clearable v-model="item.system"></el-input>
+            </div>
+            <div class="right-converted-value">
+              <el-input placeholder="Please enter..." clearable v-model="item.converted"></el-input>
+            </div>
+            <div class="delete-icon">
+              <span
+                @click="handleDeleteMappingField(index)"
+                class="font_family icon-icon_delete_b"
+              ></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-button
+      class="el-button--text"
+      @click="handleAddMappingItem"
+      style="height: 32px; margin-top: 8px; padding: 8px"
+    >
+      <span class="font_family icon-icon_add_b" style="color: var(--color-theme)"></span>
+      <span style="color: var(--color-theme)">Add Mapping</span>
+    </el-button>
+    <template #footer>
+      <el-button
+        style="height: 40px; width: 115px"
+        class="cancel-btn"
+        type="default"
+        @click="fieldMappingVisible = false"
+        >Cancel</el-button
+      >
+      <el-button
+        style="height: 40px; width: 120px"
+        class="el-button--dark"
+        @click="handleAddMapping"
+        >Apply</el-button
+      >
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.template-box {
+  margin-bottom: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  overflow: hidden;
+  .header {
+    height: 48px;
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    border-radius: 12px 12px 0 0;
+    background-color: var(--color-header-bg);
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .right-option {
+    margin-left: auto;
+  }
+  .content-box {
+    height: 100%;
+    padding: 8px 16px 16px;
+  }
+}
+.fields-configuration {
+  div.content-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 272px;
+    max-height: 400px;
+    width: 100%;
+    padding-bottom: 8px;
+    padding-right: 0px;
+    // overflow: auto;
+    .empty-box {
+      align-self: center;
+      width: 100%;
+      text-align: center;
+      p {
+        margin-top: 12px;
+        color: var(--color-neutral-2);
+      }
+    }
+    .fields-list {
+      width: 100%;
+      max-height: 400px;
+      padding: 8px 0;
+      padding-right: 16px;
+      overflow: auto;
+      user-select: none;
+      .field-item {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        margin-bottom: 8px;
+        padding-left: 16px;
+        border-radius: 6px;
+        border: 1px solid var(--color-border);
+        .label {
+          flex: 1;
+          .required-symbol {
+            color: var(--color-danger);
+          }
+        }
+        .display-name {
+          flex: 1.2;
+          margin: 0 16px;
+          :deep(.el-input__wrapper) {
+            height: 32px;
+          }
+        }
+        .actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 303px;
+          padding-left: 30px;
+          .checkbox-group {
+            display: flex;
+          }
+          .el-checkbox {
+            margin-right: 16px;
+            :deep(.el-checkbox__inner) {
+              height: 16px;
+              width: 16px;
+              &::after {
+                border-width: 2px;
+                height: 9px;
+                width: 5px;
+                left: 4px;
+              }
+            }
+            :deep(.el-checkbox__label) {
+              margin-top: 3px;
+              padding-left: 4px;
+              line-height: 2;
+            }
+          }
+          .font_family {
+            float: right;
+            cursor: pointer;
+          }
+          .action-icon {
+            width: 144px;
+            display: flex;
+            justify-content: space-around;
+          }
+        }
+      }
+    }
+  }
+  .ghost-column {
+    cursor: move !important;
+    span {
+      opacity: 0;
+    }
+    border: 1px dashed var(--color-customize-column-item-drag-border) !important;
+    background-color: var(--color-customize-column-item-drag-bg) !important;
+    box-shadow: none !important;
+  }
+
+  .fallback-class {
+    opacity: 1 !important;
+    background-color: var(--color-customize-column-item-hover-bg) !important;
+    cursor: move !important;
+  }
+}
+</style>
+<style lang="scss">
+.add-new-field-dialog {
+  .field-item {
+    margin-bottom: 16px;
+    .label {
+      margin-bottom: 4px;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .field-value {
+    .el-radio-group {
+      width: 100%;
+      .el-radio {
+        flex: 1;
+        margin-right: 0;
+        padding-left: 12px;
+        border: 1px solid var(--color-border);
+        &:first-child {
+          border-radius: 6px 0 0 6px;
+          border-right: none;
+        }
+        &:last-child {
+          border-radius: 0 6px 6px 0;
+        }
+        .el-radio__label {
+          color: var(--color-neutral-1);
+        }
+      }
+    }
+  }
+}
+.field-mapping-dialog {
+  .mapping-list {
+    border-radius: 6px;
+    overflow: hidden;
+    .label {
+      display: flex;
+      height: 24px;
+      width: 768px;
+      background-color: var(--color-header-bg);
+      .left-label {
+        width: 364px;
+        padding: 4px 8px;
+      }
+      .right-label {
+        width: 404px;
+        padding: 4px 8px;
+      }
+    }
+    .list-item {
+      display: flex;
+      height: 48px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+
+      .left-system-value,
+      .right-converted-value {
+        flex: 1;
+        padding: 8px;
+      }
+      .left-system-value {
+        border-right: 1px solid var(--color-border);
+      }
+      .delete-icon {
+        width: 48px;
+        text-align: center;
+        line-height: 48px;
+      }
+      &:nth-child(n + 3) {
+        border-top: none;
+      }
+
+      &:last-child {
+        border-radius: 0 0 6px 6px;
+      }
+    }
+  }
+}
+</style>