fix: 修复Report相关bug

src/api/module/report.ts

@@ -128,6 +128,21 @@ export const editReportTemplate = (params: any, config: any) => {
 }
 
 
+/**
+ * 删除report template
+ */
+export const deleteReportTemplate = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'report_config',
+      operate: 'delete',
+      ...params
+    },
+    config
+  )
+}
+
 /**
  * 获取Report页表格数据
  */

src/components/SelectTableSelect/src/SelectTableSelect.vue

@@ -84,7 +84,7 @@ const changeAutoSelect = (val: any, value: any) => {
   }
   AutoSelectObj[val] = value.join()
   AutoSelectObj2[val] = value
-  emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2,errorBoolean.value)
+  emit('changeAutoSelect', AutoSelectObj, AutoSelectObj2, errorBoolean.value)
 }
 const typeSelectFocus = (index: any, e: any) => {
   typeSelectIndex.value = index
@@ -157,7 +157,6 @@ const checkdestination = (row: any, index: any) => {
         v-model="AddType[index].placesType"
         :suffix-icon="IconDropDown"
         @blur="typeSelectBlur"
-        class="testname"
         @focus="typeSelectFocus(index, $event)"
         @click="typeSelectClick(index, $event)"
         @change="changeSelect(AddType[index].placesType)"

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -196,7 +196,6 @@ const typeSelectClick = (index: any, val: any) => {
         v-model="AddType[index].partyType"
         :suffix-icon="IconDropDown"
         @blur="typeSelectBlur"
-        class="testname"
         @focus="typeSelectFocus(index, $event)"
         @click="typeSelectClick(index, $event)"
         @change="changeSelect(AddType[index].partyType)"
@@ -312,4 +311,4 @@ const typeSelectClick = (index: any, val: any) => {
   line-height: 14px;
   margin-top: 5px;
 }
-</style>
+</style>

src/styles/elementui.scss

@@ -466,7 +466,7 @@ div .el-checkbox--large .el-checkbox__label {
   padding-left: 4px;
 }
 span.el-checkbox__input.is-checked + .el-checkbox__label {
-  color: var(--color-neutral-2);
+  color: var(--color-neutral-1);
 }
 /* 修改选中时打勾图标的大小 */
 div .el-checkbox.el-checkbox--large span.el-checkbox__inner::after {

src/views/Report/src/ReportView.vue

@@ -5,11 +5,22 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatNumber } from '@/utils/tools'
 import { useRouter } from 'vue-router'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import emptyImgLight from './images/empty-light.png'
+import emptyImgDark from './images/empty-dark.png'
+import { useThemeStore } from '@/stores/modules/theme'
 
 const router = useRouter()
+const themeStore = useThemeStore()
+
 const textSearch = ref('')
 // search report name
-const SearchInput = () => {}
+const SearchInput = () => {
+  getTableData()
+}
+
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? emptyImgDark : emptyImgLight
+})
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 256, [filterRef])
@@ -57,14 +68,15 @@ const getTableData = (isPageChange?: boolean) => {
     .getReportPageTable({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: isPageChange ? pageInfo.value.total : -1
+      rc: isPageChange ? pageInfo.value.total : -1,
+      text_search: textSearch.value
     })
     .then((res: any) => {
       if (res.code === 200) {
         pageInfo.value.total = Number(res.data.rc)
         pageInfo.value.pageNo = res.data.cp
         pageInfo.value.pageSize = res.data.ps
-        tableData.value.data = res.data.searchData
+        tableData.value.data = res.data.searchData || []
       }
     })
     .finally(() => {
@@ -128,7 +140,7 @@ onMounted(() => {
     >
       <!-- 空数据时的插槽 -->
       <template #empty>
-        <img src="./images/default_no_data@2x.png" />
+        <img :src="emptyImg" />
         <div class="empty-text">No data</div>
       </template>
       <template #action="{ row }">

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

@@ -69,6 +69,7 @@ const allTable = ref<VxeGridProps<any>>({
 
 const tableRef = ref<VxeGridInstance | null>(null)
 const pageInfo = ref({ pageNo: 1, pageSize: 50, total: 0 })
+const reportName = ref('')
 
 const handleColumns = (columns: any) => {
   const newColumns = columns.map((item: any) => {
@@ -122,6 +123,8 @@ const getTableData = (isPageChange?: boolean) => {
 
         tmpSearch = res.data.tmp_search
 
+        reportName.value = res.data.reportName
+
         const sortByData = res.data.sortBy
         sortByOptions.value = sortByData.options
         sortBy.value = sortByData.field
@@ -169,13 +172,12 @@ const getExportTableData = async (type: string, column: any) => {
     }
   })
   await nextTick(async () => {
-    debugger
     await autoWidth(allTable.value, allTableRef.value)
   })
   const exportConfig: any = {
     type: type,
     message: false,
-    filename: `Report List_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`
+    filename: `${reportName.value || 'Report List'}_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`
     // columns: column || tableData.value.columns
   }
   allTableRef.value.exportData(exportConfig)
@@ -203,7 +205,7 @@ defineExpose({
   >
     <div class="setting-table">
       <div class="flex">
-        <div class="Title">Report Data Review</div>
+        <div class="title">Report Data Review</div>
         <div class="flex" style="margin-bottom: 6px">
           <span class="sort-text">Sort by:</span>
           <el-select
@@ -270,8 +272,8 @@ defineExpose({
     color: var(--color-neutral-2);
   }
 }
-.Title {
-  font-size: var(--font-size-6);
+.title {
+  font-size: 18px;
   font-weight: 700;
   margin-bottom: 13px;
 }

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

@@ -174,6 +174,7 @@ const handleSave = () => {
 }
 .container {
   padding: 16px 24px;
+  padding-bottom: 48px;
   .schedule_rule {
     border: 1px solid var(--color-border);
     border-radius: 12px;

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

@@ -38,7 +38,6 @@ const generateTimeOptions = (intervalMinutes = 30): Array<{ value: string; label
       label: timeStr
     })
   }
-
   return options
 }
 
@@ -372,9 +371,8 @@ defineExpose({
             Time
           </div>
 
-          <a-select
-            v-model:value="timeValue"
-            :options="timeItem"
+          <el-select
+            v-model="timeValue"
             style="width: 100%; margin: 4px 0 0 0"
             :style="{
               maxWidth:
@@ -387,10 +385,13 @@ defineExpose({
             }"
             placeholder="Please select..."
           >
-            <template #suffixIcon>
-              <span class="font_family icon-icon_time_b"></span>
-            </template>
-          </a-select>
+            <el-option
+              v-for="item in timeItem"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
         </div>
       </div>
     </div>

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

@@ -147,7 +147,7 @@ defineExpose({
   <div>
     <div class="SettingTable">
       <div class="flex">
-        <div class="Title">Report Data Review</div>
+        <div class="title">Report Data Review</div>
         <div class="flex">
           <span class="sort-text">Sort by:</span>
           <el-select
@@ -218,8 +218,8 @@ defineExpose({
     color: var(--color-neutral-2);
   }
 }
-.Title {
-  font-size: var(--font-size-6);
+.title {
+  font-size: 18px;
   font-weight: 700;
 }
 .pagination {

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

@@ -239,7 +239,7 @@ defineExpose({
         <el-radio-group v-model="type" @change="changeTime">
           <el-radio value="dynamic_rolling">
             <div class="radio_custom">
-              <div style="height: 38px">
+              <div style="height: 32px" class="flex">
                 Dynamic Rolling Range
                 <el-tooltip
                   popper-class="schedule-popper"
@@ -267,7 +267,10 @@ defineExpose({
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div class="flex" style="align-items: end; margin: 0 8px 8px 0; flex-wrap: wrap">
+                <div
+                  class="flex"
+                  style="align-items: end; margin: 16px 8px 16px 0; flex-wrap: wrap"
+                >
                   <div class="date_flex" style="margin-right: 10px">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
@@ -300,7 +303,7 @@ defineExpose({
           </el-radio>
           <el-radio value="fixed">
             <div class="radio_custom">
-              <div style="height: 38px">
+              <div style="height: 32px" class="flex">
                 Fixed Range
                 <el-tooltip
                   :show-arrow="false"
@@ -332,7 +335,7 @@ defineExpose({
                     <el-radio-button label="Customize" value="Customize" />
                   </el-radio-group>
                 </div>
-                <div style="display: flex; padding-bottom: 2px">
+                <div style="display: flex; padding-bottom: 16px">
                   <div style="margin-right: 9px; width: 50%">
                     <div class="date_text">Start Date</div>
                     <el-date-picker
@@ -391,7 +394,7 @@ defineExpose({
   .schedule_title {
     padding: 11px 9px;
     font-weight: 700;
-    font-size: 18px;
+    font-size: 14px;
     color: var(--color-neutral-1);
   }
   .schedule_container {
@@ -403,15 +406,14 @@ defineExpose({
 }
 :deep(.el-radio) {
   display: flex;
-  min-height: 40px;
+  min-height: 32px;
   border: 1px solid var(--color-system-border);
   background-color: var(--color-system-body-bg);
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   border-radius: 6px;
   padding: 0 8px;
   margin-right: 0;
   height: fit-content;
-  line-height: 40px;
   align-items: start;
 }
 .oceanCheckbox2 {
@@ -471,13 +473,15 @@ defineExpose({
   }
 }
 :deep(.el-radio__inner) {
-  margin-top: 11px;
+  margin-top: 6px;
 }
 :deep(.el-radio__input) {
   margin-top: 2px;
 }
 .date_text {
-  height: 26px;
+  margin-top: 16px;
+  margin-bottom: 4px;
+  line-height: 16px;
   color: var(--color-neutral-2);
   font-size: 12px;
   font-weight: 400;
@@ -511,7 +515,7 @@ defineExpose({
 .time_title {
   color: var(--color-neutral-2);
   font-size: 12px;
-  height: 25px;
+  line-height: 16px;
   margin-bottom: 4px;
 }
 .date_flex {

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

@@ -70,7 +70,7 @@ defineExpose({
 })
 </script>
 <template>
-  <div style="padding: 8px 16px 16px 16px">
+  <div style="padding: 8px 16px">
     <el-radio-group v-model="validityPeriodType" @change="ChangeValidity">
       <el-radio value="permanent">
         Permanent Valid
@@ -86,7 +86,7 @@ defineExpose({
       </el-radio>
       <el-radio value="custom">
         <div class="radio_custom">
-          <div style="height: 38px">
+          <div style="height: 32px" class="flex">
             Custom Period
             <el-tooltip
               popper-class="schedule-popper"
@@ -98,7 +98,7 @@ defineExpose({
               <span class="font_family icon-icon_info_b"></span>
             </el-tooltip>
           </div>
-          <div v-if="isShowEffective" style="display: flex">
+          <div v-if="isShowEffective" style="display: flex; margin-bottom: 8px">
             <div style="margin-right: 9px">
               <div class="date_text">Effective Start Date</div>
               <el-date-picker
@@ -132,12 +132,16 @@ defineExpose({
   </div>
 </template>
 <style lang="scss" scoped>
+.flex {
+  display: flex;
+  align-items: center;
+}
 :deep(.el-radio-group) {
   display: block;
 }
 :deep(.el-radio) {
   display: flex;
-  min-height: 40px;
+  min-height: 32px;
   border: 1px solid var(--color-system-border);
   background-color: var(--color-system-body-bg);
   margin-bottom: 8px;
@@ -145,7 +149,7 @@ defineExpose({
   padding: 0 8px;
   margin-right: 0;
   height: fit-content;
-  line-height: 40px;
+  line-height: 32px;
   align-items: start;
 }
 :deep(.radio_custom) {
@@ -163,7 +167,7 @@ defineExpose({
   }
 }
 :deep(.el-radio__inner) {
-  margin-top: 12px;
+  margin-top: 7px;
 }
 .date_text {
   height: 26px;

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

@@ -4,6 +4,7 @@ import partyIDSelect from './components/partyIDSelect.vue'
 import GroupNameSelect from './components/GroupNameSelect.vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import AdjustmentField from './components/AdjustmentField.vue'
+import { cloneDeep, uniq, uniqueId } from 'lodash'
 
 const router = useRouter()
 const route = useRoute()
@@ -20,22 +21,30 @@ onMounted(() => {
     $api
       .editReportTemplate({ serial_no: route.query.serial_no })
       .then((res) => {
+        if (res.code !== 200) return
+        const data = res.data
         infoData.value = {
           // 如果是复制的话，清空Report Name
-          reportName: route.query.copy !== 't' ? res.data.reportName : '',
-          reportLevel: res.data.reportLevel,
-          reportDescription: res.data.reportDescription
+          reportName: route.query.copy !== 't' ? data.reportName : '',
+          reportLevel: data.reportLevel,
+          reportDescription: data.reportDescription
         }
-        fieldsList.value = res.data.reportFields
-        accessControlType.value = res.data.reportAccess.type
+        fieldsList.value = data.reportFields.map((item) => {
+          return {
+            ...item,
+            uniqueId: generate8DigitUnique()
+          }
+        })
+        const reportAccess = data.reportAccess
+        accessControlType.value = reportAccess.type
         specificRoles.value = {
-          partyId: res.data.reportAccess.partyId,
-          groupName: res.data.reportAccess.groupName
+          partyId: reportAccess.partyId,
+          groupName: reportAccess.groupName,
+          systemAccount: reportAccess.systemAccount
         }
       })
       .finally(() => {
         pageLoading.value = false
-
         watch(accessControlType, (newVal) => {
           if (newVal === 'Specific Roles') {
             // 等待下一个渲染周期结束后，获取detailRef的高度
@@ -54,6 +63,7 @@ onMounted(() => {
 })
 
 interface Field {
+  uniqueId: string
   field: string
   title: string
   displayName: string
@@ -61,6 +71,7 @@ interface Field {
   value?: string
   isFilter: boolean
   isSort: boolean
+  groupName: string
 }
 const fieldsList = ref<Field[]>([])
 const levelOptions = [
@@ -78,8 +89,34 @@ const levelOptions = [
   }
 ]
 
-const handleDeleteField = (field: string) => {
-  fieldsList.value = fieldsList.value.filter((item) => item.field !== field)
+// 前端使用的唯一标识符
+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) => {
+  fieldsList.value.splice(index, 1)
+}
+const handleCopyField = (index: number) => {
+  const curField = cloneDeep(fieldsList.value[index])
+  curField.displayName = `${curField.displayName} (Copy)`
+  curField.isFilter = false
+  curField.isSort = false
+  curField.uniqueId = generate8DigitUnique()
+  fieldsList.value.splice(index + 1, 0, curField)
 }
 
 const AdjustmentFieldRef = ref()
@@ -96,7 +133,8 @@ const handleCustomizeColumns = () => {
   AdjustmentFieldRef.value.openDialog(
     params,
     -220,
-    'Drag item over to this selection or click "add" icon to show the field on report template list'
+    'Drag item over to this selection or click "add" icon to show the field on report template list',
+    fieldsList.value
   )
 }
 
@@ -128,11 +166,13 @@ const addNewField = () => {
     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
   })
@@ -148,16 +188,13 @@ const handleApplay = (data: any) => {
   const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
   fieldsList.value = data.map((item: any) => {
     return {
-      field: item.field,
-      title: item.label,
-      displayName: item.label,
-      fieldType: item.fieldType,
-      isFilter: false,
-      isSort: false,
-      fieldLevel: item.fieldLevel,
-      groupName: item.groupName,
-      ids: item.ids,
-      dataType: item.dataType
+      ...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]
@@ -168,7 +205,8 @@ const detailRef: Ref<HTMLElement | null> = ref(null)
 
 const specificRoles = ref({
   partyId: [],
-  groupName: []
+  groupName: [],
+  systemAccount: ''
 })
 const changePartyId = (val: string[]) => {
   specificRoles.value.partyId = val
@@ -184,23 +222,32 @@ const handleCancel = () => {
   router.push('/template-management')
 }
 
-const handleSave = () => {
+const handlePageSave = () => {
+  let verified = true
   if (!infoData.value.reportName.trim()) {
     ElMessage.warning('Please enter the Report Name.')
+    verified = false
   }
   if (!infoData.value.reportLevel) {
     ElMessage.warning('Please enter the Report Level')
+    verified = false
   }
   if (!infoData.value.reportDescription.trim()) {
     ElMessage.warning('Please enter the Report Description.')
+    verified = false
   }
   if (
     accessControlType.value === 'Specific Roles' &&
-    (specificRoles.value.partyId.length === 0 || specificRoles.value.groupName.length === 0)
+    specificRoles.value.partyId.length === 0 &&
+    specificRoles.value.groupName.length === 0 &&
+    specificRoles.value.systemAccount
   ) {
     ElMessage.warning('Please select Party ID or Group Name for Specific Roles access control.')
+    verified = false
+  }
+  if (!verified) {
+    return
   }
-
   const data = {
     report_name: infoData.value.reportName,
     report_level: infoData.value.reportLevel,
@@ -208,6 +255,7 @@ const handleSave = () => {
     access_type: accessControlType.value,
     party_ids: specificRoles.value.partyId || [],
     group_names: specificRoles.value.groupName || [],
+    system_account: specificRoles.value.systemAccount,
     fieldsList: fieldsList.value
   }
   let serial_no = ''
@@ -233,7 +281,7 @@ const handleSave = () => {
           <span class="font_family icon-icon_return_b" style="margin-right: 3px"></span
           >Cancel</el-button
         >
-        <el-button class="el-button--main" @click="handleSave">
+        <el-button class="el-button--main" @click="handlePageSave">
           <span class="font_family icon-icon_save_b" style="margin-right: 3px"></span
           >Save</el-button
         >
@@ -295,7 +343,7 @@ const handleSave = () => {
             <el-button
               v-if="fieldsList.length > 0"
               class="el-button--dark"
-              @click="handleCustomizeColumns"
+              @click="handleCustomizeColumns()"
               style="width: 110px; padding-top: 11px"
             >
               <span style="margin-right: 3px" class="font_family icon-icon_add_b"></span>
@@ -319,38 +367,56 @@ const handleSave = () => {
               :forceFallback="true"
               fallback-class="fallback-class"
               group="customizeColumns"
-              item-key="field"
+              item-key="uniqueId"
               @end="handleRightRemove"
+              handle=".handle-draggable"
             >
-              <div class="field-item" v-for="fieldItem in fieldsList" :key="fieldItem.field">
+              <div
+                class="field-item"
+                v-for="(fieldItem, index) in fieldsList"
+                :key="fieldItem.uniqueId"
+              >
                 <span
-                  class="font_family icon-icon_dragsort__b draggable-icon"
+                  class="font_family icon-icon_dragsort__b draggable-icon handle-draggable"
                   style="margin-right: 12px; font-size: 16px"
                 ></span>
-                <div class="label">
+                <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>
+                  <div class="checkbox-group">
                     <el-checkbox
-                      :disabled="fieldItem.fieldType !== 'System'"
+                      :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>
                   <span
-                    @click="handleDeleteField(fieldItem.field)"
+                    style="margin-right: 4px"
+                    @click="handleCopyField(index)"
+                    class="font_family icon-icon_clone_b"
+                  ></span>
+                  <span
+                    @click="handleDeleteField(index)"
                     class="font_family icon-icon_delete_b"
                   ></span>
                 </div>
@@ -396,7 +462,7 @@ const handleSave = () => {
                         :data="specificRoles.partyId"
                       ></partyIDSelect>
                     </div>
-                    <div class="filter-item">
+                    <div class="filter-item" style="margin-bottom: 16px">
                       <div class="label">
                         <span style="color: var(--color-danger)">*</span>
                         <span>Group Name</span>
@@ -406,6 +472,16 @@ const handleSave = () => {
                         :data="specificRoles.groupName"
                       ></GroupNameSelect>
                     </div>
+                    <div class="filter-item">
+                      <div class="label">
+                        <span style="color: var(--color-danger)">*</span>
+                        <span>KLN ONLINE Account</span>
+                      </div>
+                      <el-input
+                        placeholder="Please enter KLN ONLINE Account"
+                        v-model="specificRoles.systemAccount"
+                      />
+                    </div>
                   </div>
                 </div>
               </template>
@@ -491,7 +567,8 @@ const handleSave = () => {
   border: 1px solid var(--color-border);
   border-bottom: none;
   border-width: 0 0 1px 0;
-  padding: 16px 24px 8px;
+  padding: 16px 24px 12px;
+  overflow: auto;
 }
 .template-box {
   margin-bottom: 8px;
@@ -549,7 +626,7 @@ const handleSave = () => {
         align-items: center;
         height: 48px;
         margin-bottom: 8px;
-        padding: 16px;
+        padding: 0 16px;
         border-radius: 6px;
         border: 1px solid var(--color-border);
         .label {
@@ -559,7 +636,7 @@ const handleSave = () => {
           }
         }
         .display-name {
-          flex: 1.3;
+          flex: 1.2;
           margin: 0 16px;
           :deep(.el-input__wrapper) {
             height: 32px;
@@ -569,7 +646,11 @@ const handleSave = () => {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          width: 160px;
+          width: 240px;
+          padding-left: 30px;
+          .checkbox-group {
+            display: flex;
+          }
           .el-checkbox {
             margin-right: 16px;
             :deep(.el-checkbox__inner) {
@@ -583,6 +664,7 @@ const handleSave = () => {
               }
             }
             :deep(.el-checkbox__label) {
+              margin-top: 3px;
               padding-left: 4px;
               line-height: 2;
             }

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

@@ -8,7 +8,7 @@ const dialogVisible = ref(false)
 const searchColumn = ref('')
 // search筛选的options
 const searchOptions: any = ref()
-
+const dragTips = ref()
 // 右侧箭头消失所需要translateX的值
 const rightArrowHideDistance = ref(0)
 // 控制tab栏的左右切换箭头
@@ -135,12 +135,10 @@ const allDataCopy: any = ref()
 
 const loading = ref(false)
 // 获取数据
-const getData = async (reset?: string) => {
+const getData = async (selectedList?: Array<any>) => {
   loading.value = true
   let paramsData: any = { ...params.value }
-  if (reset === 'yes') {
-    paramsData.reset = 'yes'
-  }
+
   await $api.getReportFieldsConfiguration(paramsData).then((res: any) => {
     if (res.code === 200) {
       // allDataCopy就是所有的数据
@@ -148,8 +146,19 @@ const getData = async (reset?: string) => {
       groupColumns.value = res.data.GroupColumnsLeft
       activeName.value = allDataCopy.value?.[0]?.name
       searchOptions.value = res.data.GroupColumnsLeft?.[0]?.children
-      // 右侧选中的数据
-      selectColumns.value = res.data.GroupColumnsRight
+
+      // 右侧 当没有初始值时才需要从接口获取数据
+      if (selectedList?.length && selectedList.length !== 0) {
+        const newArr = selectedList.map((item: any) => {
+          return {
+            ...item,
+            label: item.title
+          }
+        })
+        selectColumns.value = newArr
+      } else {
+        selectColumns.value = res.data.GroupColumnsRight
+      }
       nextTick(() => {
         handleTabArrow()
         // 八秒后关闭引导
@@ -167,11 +176,18 @@ const getData = async (reset?: string) => {
 
 const params = ref()
 // rightDistance是右侧箭头消失所需要translateX的值
-const openDialog = async (paramsData: Object, rightDistance: number) => {
+const openDialog = async (
+  paramsData: Object,
+  rightDistance: number,
+  tips: string,
+  selectedList?: Array<any>
+) => {
   firstLoad.value = localStorage.getItem('firstLoadCustomizeColumns')
   params.value = paramsData
   dialogVisible.value = true
-  await getData()
+
+  dragTips.value = tips
+  await getData(selectedList)
   rightArrowHideDistance.value = rightDistance
   nextTick(() => {
     if (!firstLoad.value) {
@@ -297,9 +313,7 @@ const emits = defineEmits<{
   apply: [selectColumns: any]
   reset: []
 }>()
-const handleReset = () => {
-  getData('yes')
-}
+
 const handleApply = () => {
   emits('apply', selectColumns.value)
   dialogVisible.value = false
@@ -348,10 +362,7 @@ defineExpose({
       </div>
       <div class="tips">
         <span style="font-size: 16px">* </span>
-        <span
-          >Drag item over to this selection or click "add" icon to show the field on report template
-          list</span
-        >
+        <span>{{ dragTips }}</span>
       </div>
     </div>
     <div class="draggable-list">

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

@@ -26,6 +26,9 @@ const changeData = (val: string[]) => {
   // 同步选中状态
   emit('changeData', val)
 }
+const handleVisibleChange = (visible) => {
+  !visible && (options.value = [])
+}
 
 interface ListItem {
   id: string
@@ -57,6 +60,8 @@ const remoteMethod = (query: string) => {
           code: item.code,
           checked: false
         }))
+      } else {
+        options.value = []
       }
     })
     .catch((err) => {
@@ -94,6 +99,7 @@ onUnmounted(() => {
     popper-class="group-name-select-popper"
     :filter-method="debouncedRemoteMethod"
     @change="changeData"
+    @visible-change="handleVisibleChange"
   >
     <el-option
       v-for="item in options"
@@ -102,7 +108,11 @@ onUnmounted(() => {
       :value="item.label"
     >
       <!-- 只用于显示，不控制逻辑 -->
-      <el-checkbox :model-value="selectData.includes(item.label)" style="flex: 1">
+      <el-checkbox
+        class="checkbox-style"
+        :model-value="selectData.includes(item.label)"
+        style="flex: 1"
+      >
         <div class="select-option">
           <span>{{ item.label }}</span>
           <span class="value" :style="{ width: selectViewRef?.$el?.offsetWidth - 70 + 'px' }">
@@ -116,18 +126,22 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .select-option {
+  flex: 1;
   display: flex;
   align-items: center;
   flex-direction: column;
   align-items: flex-start;
   max-width: 100%;
   gap: 3px;
-  padding-top: 3px;
+  padding-top: 1px;
+
+  min-height: 32px;
+  max-height: 80px;
   :deep(.el-checkbox__label) {
     font-weight: 700;
   }
   & > .value {
-    // width: 100%;
+    overflow: auto;
     white-space: wrap;
     font-size: 12px;
     line-height: 16px;
@@ -136,7 +150,15 @@ onUnmounted(() => {
 .value {
   color: var(--color-neutral-2);
 }
-
+.checkbox-style {
+  min-height: 32px;
+  max-height: 80px;
+  height: auto;
+  :deep(.el-checkbox__label) {
+    flex: 1;
+    overflow: auto;
+  }
+}
 :deep(.el-checkbox__inner) {
   height: 16px;
   width: 16px;

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, nextTick, onMounted } from 'vue'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
-import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { formatTimezone, formatNumber } from '@/utils/tools'
@@ -110,10 +109,17 @@ const handleClick = (row: any, isActive: boolean) => {
 }
 
 const pageInfo = ref({ pageNo: 1, pageSize: 20, total: 0 })
+const isShowDeleteBtn = ref(false)
 // 获得表格数据后赋值
 const assignTableData = (data: any) => {
   tableData.value.data = data.searchData || []
   pageInfo.value.total = Number(data.rc) || 0
+  isShowDeleteBtn.value = data?.isDelete || false
+  const actionColumn = tableData.value.columns.find((item) => {
+    return item.title === 'Action'
+  })
+  actionColumn.width = isShowDeleteBtn.value ? 150 : 120
+  tableRef.value.loadColumn(tableData.value.columns)
 }
 
 let searchdata: any = {}
@@ -259,6 +265,14 @@ const handleCopy = (serial_no: string) => {
   })
 }
 
+const handleDelete = (serial_no: string) => {
+  $api.deleteReportTemplate({ serial_no }).then((res: any) => {
+    if (res.code === 200) {
+      getTableData()
+    }
+  })
+}
+
 // 实现行点击样式
 useRowClickStyle(tableRef)
 
@@ -319,6 +333,13 @@ defineExpose({
             class="font_family icon-icon_active"
           ></span>
         </el-button>
+        <el-button
+          v-if="isShowDeleteBtn"
+          class="el-button--blue action-btn"
+          @click="handleDelete(row.serial_no)"
+        >
+          <span class="font_family icon-icon_delete_b"></span>
+        </el-button>
       </template>
       <!-- Status字段的插槽 -->
       <template #status="{ row, column }">