<template>
<div class="h100">
  <common-layout
    :filter-form="taskWatchWatchHomeFilterForm"
    ref="layoutRef"
    :form-attrs="{
      spanAttrs:{
        span:4
      }
    }"
    :get-table-list="getTableList"
    :table-header="taskWatchHomeTableHeader"
  :table-attrs="{
    'has-operation':true
  }">
   <template #operation="{data}">
     <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
   </template>
  </common-layout>
</div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {ref} from "vue";
import {taskWatchWatchHomeFilterForm} from "@/data/all-forms";
import {taskWatchHomeTableHeader} from "@/data/all-table-header";
import {getTaskWatchHomeTableData} from "@/service/task-manage/task-watch";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";

export default {
  name: "TaskWatchHome",
  components: {CommonLayout},
  setup() {
    useActiveGetTableData(getTableList)
    function getTableList() {
      getTaskWatchHomeTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        START_DATE:layoutRef.value.form.START_DATE || '',
        END_DATE:layoutRef.value.form.END_DATE || '',
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
      })

    }
    const layoutRef = ref(null)
    return {
      layoutRef,
      getTableList,
      taskWatchWatchHomeFilterForm,
      taskWatchHomeTableHeader
    }
  }
}
</script>

<style scoped lang="scss">

</style>
