feat: Create Report Template页面Field字段新增Mapping功能

src/styles/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "font_family"; /* Project id 4672385 */
-  src: url('iconfont.woff2?t=1764126605090') format('woff2'),
-       url('iconfont.woff?t=1764126605090') format('woff'),
-       url('iconfont.ttf?t=1764126605090') format('truetype'),
-       url('iconfont.svg?t=1764126605090#font_family') format('svg');
+  src: url('iconfont.woff2?t=1767838502999') format('woff2'),
+       url('iconfont.woff?t=1767838502999') format('woff'),
+       url('iconfont.ttf?t=1767838502999') format('truetype'),
+       url('iconfont.svg?t=1767838502999#font_family') format('svg');
 }
 
 .font_family {
@@ -14,6 +14,58 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_convert_b:before {
+  content: "\e751";
+}
+
+.icon-icon_comment_b:before {
+  content: "\e74e";
+}
+
+.icon-icon_lost_b1:before {
+  content: "\e74f";
+}
+
+.icon-icon_won_b:before {
+  content: "\e750";
+}
+
+.icon-icon_lost_b:before {
+  content: "\e74d";
+}
+
+.icon-icon_page_b:before {
+  content: "\e74c";
+}
+
+.icon-icon_door_b1:before {
+  content: "\e74a";
+}
+
+.icon-icon_airport_b:before {
+  content: "\e74b";
+}
+
+.icon-icon_support_party_b:before {
+  content: "\e745";
+}
+
+.icon-icon_close_b:before {
+  content: "\e746";
+}
+
+.icon-icon_preview_b1:before {
+  content: "\e747";
+}
+
+.icon-icon_communic_ation_b1:before {
+  content: "\e748";
+}
+
+.icon-icon_detail_b:before {
+  content: "\e749";
+}
+
 .icon-icon_active:before {
   content: "\e744";
 }

src/views/Report/src/components/ReportSchedule/src/ReportSchedule.vue

@@ -41,6 +41,8 @@ onMounted(() => {
     .then((res: any) => {
       if (res.code === 200) {
         pageData.value = res.data.showData
+        // 初始化的时候如果Report Data Time Range 有值 则调用一次查询
+        changeTimeRange(pageData.value.timeRange)
       }
     })
     .then(() => {

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

@@ -153,6 +153,7 @@ defineExpose({
           <el-select
             style="width: 160px; margin: 0 8px"
             v-model="orderBy"
+            @change="getTableData()"
             placeholder="Please select..."
           >
             <el-option

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

@@ -72,7 +72,9 @@ interface Field {
   value?: string
   isFilter: boolean
   isSort: boolean
+  mapping?: { system: string; converted: string }[]
   groupName: string
+  isFieldDataMapping?: string
 }
 const fieldsList = ref<Field[]>([])
 const levelOptions = [
@@ -118,6 +120,50 @@ const handleDeleteField = (index: number, uniqueId: string) => {
   })
 }
 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)`
@@ -198,13 +244,17 @@ const addNewField = () => {
     isFilter: false,
     isSort: false
   })
+  clearNewFieldData()
+  addNewFieldVisible.value = false
+}
+const clearNewFieldData = () => {
   newFieldInfo.value = {
     name: '',
     fieldType: 'Blank',
     value: ''
   }
-  addNewFieldVisible.value = false
 }
+
 // 调整应用字段
 const handleApplay = (data: any) => {
   const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
@@ -314,6 +364,7 @@ const handlePageSave = () => {
   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) => {
@@ -467,15 +518,27 @@ const handlePageSave = () => {
                       >Sort</el-checkbox
                     >
                   </div>
-                  <span
-                    style="margin-right: 4px"
-                    @click="handleCopyField(index)"
-                    class="font_family icon-icon_clone_b"
-                  ></span>
-                  <span
-                    @click="handleDeleteField(index, fieldItem.uniqueId)"
-                    class="font_family icon-icon_delete_b"
-                  ></span>
+                  <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>
@@ -557,6 +620,7 @@ const handlePageSave = () => {
       class="add-new-field-dialog"
       title="Add New Field"
       v-model="addNewFieldVisible"
+      @closed="clearNewFieldData"
       width="480"
     >
       <div>
@@ -598,6 +662,71 @@ const handlePageSave = () => {
         >
       </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>
 
@@ -687,7 +816,7 @@ const handlePageSave = () => {
         align-items: center;
         height: 48px;
         margin-bottom: 8px;
-        padding: 0 16px;
+        padding-left: 16px;
         border-radius: 6px;
         border: 1px solid var(--color-border);
         .label {
@@ -707,7 +836,7 @@ const handlePageSave = () => {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          width: 240px;
+          width: 303px;
           padding-left: 30px;
           .checkbox-group {
             display: flex;
@@ -734,6 +863,11 @@ const handlePageSave = () => {
             float: right;
             cursor: pointer;
           }
+          .action-icon {
+            width: 144px;
+            display: flex;
+            justify-content: space-around;
+          }
         }
       }
     }
@@ -828,9 +962,6 @@ const handlePageSave = () => {
         }
       }
     }
-    // .radio-item.specific-roles {
-    //   padding: 0;
-    // }
   }
 }
 
@@ -878,4 +1009,51 @@ const handlePageSave = () => {
     }
   }
 }
+.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>

src/views/TemplateManagement/src/components/TableView/src/TableView.vue

@@ -130,7 +130,7 @@ const assignTableData = (data: any) => {
     return item.title === 'Action'
   })
   actionColumn.width = isShowDeleteBtn.value ? 150 : 120
-  tableRef.value.loadColumn(tableData.value.columns)
+  tableRef.value.loadColumn(tableData.value.columns || [])
 }
 
 let searchdata: any = {}