k_online_ui/src/views/TemplateManagement/src/TemplateManagement.vue

<script lang="ts" setup>
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import TableView from './components/TableView'
import { useRouter } from 'vue-router'

const router = useRouter()
const filterRef: Ref<HTMLElement | null> = ref(null)
const containerHeight = useCalculatingHeight(document.documentElement, 250, [filterRef])
const queryData = ref({
  text_search: '',
  is_active: '',
  application_scope: '',
  party_id: ''
})

const aiModelList = ref([])

const activeOptions = [
  {
    label: 'Active',
    value: true
  },
  {
    label: 'Inactive',
    value: false
  }
]

const applicationScopeOptions = [
  {
    label: 'All Users',
    value: 'all'
  },
  {
    label: 'Specific Users',
    value: 'specific'
  }
]

const tableRef = ref()

onMounted(() => {
  $api.getFilterPartyID().then((res) => {
    if (res.code === 200) {
      aiModelList.value = res.data
    }
  })
})

const Search = () => {
  tableRef.value.searchTableData(queryData.value)
}

const handleCreate = () => {
  // Navigate to the Create Report Template page
  router.push({
    name: 'Create Report Template'
  })
}

import { debounce } from 'lodash'
import axios from 'axios'

const emit = defineEmits(['changeData'])
const changeData = (val: string[]) => {
  // 同步选中状态
  emit('changeData', val)
}

interface ListItem {
  label: string
  id: string
  code: string
}

const options = ref<ListItem[]>([])
const loading = ref(false)
const currentController = ref<AbortController | null>(null)

const handleVisibleChange = (visible) => {
  !visible && (options.value = [])
}
const remoteMethod = (query: string) => {
  currentController.value?.abort()

  const newController = new AbortController()
  currentController.value = newController
  loading.value = true

  $api
    .getSpecificRolesPartyID({ term: query }, { signal: newController.signal })
    .then((res) => {
      if (!newController.signal.aborted && res.code === 200) {
        options.value = (res.data || []).map((item) => ({
          id: item.id,
          code: item.code,
          label: item.label
        }))
      }
    })
    .catch((err) => {
      options.value = []
      if (!axios.isCancel(err) && !newController.signal.aborted) {
        ElMessage.error('Failed to load options')
      }
    })
    .finally(() => {
      // 仅当这是最新请求时，才关闭 loading
      if (currentController.value === newController) {
        loading.value = false
      }
    })
}

// 防抖版本（可选）
const debouncedRemoteMethod = debounce(remoteMethod, 200)

onUnmounted(() => {
  currentController.value?.abort()
})
</script>
<template>
  <div class="dashboard">
    <div class="Title">
      <span>Report Template Management</span>
      <el-button class="el-button--main" @click="handleCreate">
        <span class="font_family icon-icon_add_b"></span> Create New Report Template</el-button
      >
    </div>
    <div class="display">
      <div class="heaer_top">
        <div class="input-tips_filter">
          <el-input
            placeholder="Search report name"
            v-model="queryData.text_search"
            class="log_input"
          >
            <template #prefix>
              <span class="iconfont_icon">
                <svg class="iconfont icon_dark" aria-hidden="true">
                  <use xlink:href="#icon-icon_search_b"></use>
                </svg>
              </span>
            </template>
          </el-input>
        </div>

        <div class="tips_filter">
          <el-select v-model="queryData.is_active" clearable placeholder="Is Active">
            <el-option
              v-for="item in activeOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="tips_filter">
          <el-select
            v-model="queryData.application_scope"
            clearable
            placeholder="Application Scope"
          >
            <el-option
              v-for="item in applicationScopeOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="party-id-tips-filter">
          <el-select
            v-model="queryData.party_id"
            multiple
            filterable
            reserve-keyword
            placeholder="Party IDs"
            :loading="loading"
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="1"
            popper-class="part-id-select-popper"
            :filter-method="debouncedRemoteMethod"
            @change="changeData"
            @visible-change="handleVisibleChange"
          >
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.code"
              :value="item.code"
            >
              <div class="select-option">
                <el-checkbox :model-value="queryData.party_id.includes(item.code)">
                  <span class="text-ellipsis" style="width: 240px">{{ item.code }}</span>
                </el-checkbox>
              </div>
            </el-option>
          </el-select>
        </div>

        <el-button class="el-button--dark" @click="Search">Search</el-button>
      </div>
    </div>
    <TableView :height="containerHeight" ref="tableRef"></TableView>
  </div>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  justify-content: space-between;
  height: 68px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
}
.heaer_top {
  margin-top: 6.57px;
  margin-bottom: 8px;
  padding-right: 8px;
  display: flex;
}

.display {
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  padding-left: 23.52px;
}

.tips_filter {
  flex: 1;
  height: 30px;
  max-width: 190px;
  margin-right: 8px;
}
.party-id-tips-filter {
  flex: 1;
  height: 30px;
  width: 280px;
  max-width: 280px;
  margin-right: 8px;
  :deep(.el-tag) {
    max-width: 220px !important;
  }
}
.input-tips_filter {
  flex: 1;
  max-width: 320px;
  height: 32px;
  margin-right: 8px;
  :deep(.el-input__wrapper) {
    height: 32px;
  }
}
.date-tips_filter {
  flex: 1;
  max-width: 250px;
  height: 32px;
  margin-right: 8px;
}
.comparator-tips_filter {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 260px;
  height: 32px;
  margin-right: 8px;
}
.dashboard {
  position: relative;
  background-color: var(--color-mode);
}
.text-ellipsis {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>