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

<!--
 * @Author: Haijun Zhang
 * @Date: 2022-11-03 17:39:48
 * @LastEditTime: 2022-11-07 11:33:41
 * @LastEditors: Haijun Zhang
 * @Description:
 * @FilePath: \cmc-web\webs\ams-web\src\views\data-collection\history\index.vue
-->
<template>
  <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>
</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'

export default defineComponent({
  components: { HistoryDetail },
  setup(props, context: any) {
    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>