cmc-web/webs/ams-web/src/views/data-collection/history/index.vue

<template>
  <div>
    <AmsPosition></AmsPosition>
    <div class="warpper">
      <history-detail v-if="detailDialog.visible" :dialog="detailDialog"></history-detail>
      <cb-advance-table v-show="!detailDialog.visible" title="采集历史" :search-configs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getList" :total="total" :loading="loading">
        <template #name="name, record">
          <span class="detail-href" @click="getDetail(record)">{{ name }}</span>
        </template>
        <template #status="status">
          <cb-status-icon :type="taskExeStatusFilter(status, 'color')">
            {{ taskExeStatusFilter(status) }}
          </cb-status-icon>
        </template>
        <template #type="type">
          <el-tag type="primary">{{ typeOptions[type] }}</el-tag>
        </template>
      </cb-advance-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { useTable } from '@cmp/cmp-element'
import HistoryDetail from './HistoryDetail.vue'
import { getCollectionTasksInstances } from 'services/data-collection/history'
import { columns, searchConfigs } from './config'
import { taskExeStatusFilter } from '@/filters/index'
import { cloneDeep } from 'lodash-es'
import { useRoute } from '@cmp/cmp-core'
import usePostion from '@/views/usePosition'
import AmsPosition from '@/views/AmsPosition.vue'
export default defineComponent({
  components: { HistoryDetail, AmsPosition },
  setup(props, context: any) {
    usePostion(() => getList())
    const typeOptions = {
      standard: '标准任务',
      scheduled: '定时任务',
    }

    const { list, loading, params, getList, total } = useTable({
      getService: getCollectionTasksInstances,
    })

    const state = reactive({
      searchConfigs: cloneDeep(searchConfigs),
    })

    const detailDialog: any = reactive({
      visible: false,
      record: {},
    })

    const route = useRoute()
    if (route.params && route.params.taskId) {
      state.searchConfigs.push({
        type: 'Const',
        value: 'taskId',
        initValue: route.params.taskId,
      })
    }

    const getDetail = (record: any) => {
      detailDialog.visible = true
      detailDialog.record = record
    }

    return {
      taskExeStatusFilter,
      typeOptions,
      columns,
      list,
      loading,
      params,
      total,
      detailDialog,
      getDetail,
      getList,
      ...toRefs(state),
    }
  },
})
</script>

<style lang="scss" scoped>
.warpper {
  height: calc(100vh - 100px);
  background-color: #fff;
}
</style>