Cold_offline_web/src/views/project/index.vue

<template>
   <div style="display: flex;align-items: center;margin-bottom: 10px;">
    <n-input v-model:value="queryData.T_name" type="text" placeholder="请输入报告名称" style="width: 30%;" clearable  />
    <n-button type="primary" @click="searchFun" style="margin-left: 10px;">搜索</n-button>
  </div>
  <n-data-table
    remote
    :columns="columns"
    :data="data"
    :pagination="pagination"
 
    class=" flex flex-col justify-between"

  />
</template>

<script setup>
import { h } from 'vue';
import { NButton, NSpace, NCard, NTag, NIcon, NPopover } from 'naive-ui';
import { getTaskList } from '@/api';

import { ArrowRightOutlined as ArrowRightIcon } from '@vicons/antd';


const router = useRouter();

// 查询参数
const queryData = reactive({
  T_uuid: '',
  T_name: '',
  page: 1,
  page_z: 8,
});

// 任务列表
const data = ref([]);

const renderPopover = (trigger, content) => {
  return h(
    NPopover,
    { trigger: 'hover' },
    {
      trigger: () => trigger,
      default: () => h(NSpace, null, { default: () => content }),
    }
  );
};

// 需要展示的列
const columns = [
  {
    title: '公司名称',
    key: 'T_user_name',
    width: 180,
  },
  {
    title: '报告名称',
    key: 'T_name',
    width: 180,
  },
  {
    title: '截止时间',
    key: 'T_deadline',
    width: 180,
  },
  {
    title() {
      return renderPopover(
        '流程（?）',
        [0, 1, 2, 3, 4].map((item) =>
          h(
            NTag,
            {
              bordered: false,
              type:
                item === 0
                  ? 'error'
                  : item === 1
                  ? 'info'//已完成
                  : item === 2
                  ? 'warning'
                  : item === 4
                  ? 'success'
                  : 'default',
            },
            {
              default: () => {
                if (item === 0) {
                  return '未完成';
                } else if (item === 1) {
                  return '数据来源已完成';
                } else if (item === 2) {
                  return '处理中';
                }  else if (item === 4) {
                  return '数据编辑已完成';
                } else {
                  return '已采集-无数据';
                }
              },
            }
          )
        )
      );
    },
    key: 'T_task_id',
    width: 460,
    render(row) {
      return h(
        NSpace,
        {
          align: 'center',
        },
        {
          default: () => [
            h(
              NCard,
              {
                style: {
                  width: '70px',
                  height: '50px',
                },
                contentStyle: {
                  textAlign: 'center',
                  padding: 0,
                },
              },
              {
                default: () => row.T_scheme_name,
                cover: () =>
                  h(
                    NTag,
                    {
                      class: 'w-full',
                      type: row.T_scheme_state === 0 ? 'error' : 'success',
                      bordered: false,
                    },
                    {
                      default: () => '实施方案',
                    }
                  ),
              }
            ),
            h(
              NIcon,
              { size: 25, component: ArrowRightIcon, color: '#0e7a0d' },
              {}
            ),
            h(
              NCard,
              {
                contentStyle: {
                  textAlign: 'center',
                  padding: 0,
                },
              },
              {
                default: () => row.T_collection_name,
                cover: () =>
                  h(
                    NTag,
                    {
                      class: 'w-full',
                      type:
                        row.T_collection_state === 0
                          ? 'error'
                          : row.T_collection_state === 1
                          ? 'info'
                          : row.T_collection_state === 2
                          ? 'warning'
                          : row.T_collection_state === 4
                          ? 'success'
                          : 'default',
                      bordered: false,
                    },
                    {
                      default: () => '数据采集',
                    }
                  ),
              }
            ),
            h(
              NIcon,
              { size: 25, component: ArrowRightIcon, color: '#0e7a0d' },
              {}
            ),
            h(
              NCard,
              {
                contentStyle: {
                  textAlign: 'center',
                  padding: 0,
                },
              },
              {
                default: () => row.T_reporting_name,
                cover: () =>
                  h(
                    NTag,
                    {
                      class: 'w-full',
                      type: row.T_reporting_state === 0 ? 'error' : 'success',
                      bordered: false,
                    },
                    {
                      default: () => '报告编写',
                    }
                  ),
              }
            ),
            h(
              NIcon,
              { size: 25, component: ArrowRightIcon, color: '#0e7a0d' },
              {}
            ),
            h(
              NCard,
              {
                contentStyle: {
                  textAlign: 'center',
                  padding: 0,
                },
              },
              {
                default: () => row.T_delivery_name,
                cover: () =>
                  h(
                    NTag,
                    {
                      class: 'w-full',
                      type:
                        row.T_delivery_state === 0
                          ? 'error'
                          : row.T_delivery_state === 1
                          ? 'success'
                          : 'warning',
                      bordered: false,
                    },
                    {
                      default: () => '交付审核',
                    }
                  ),
              }
            ),
          ],
        }
      );
    },
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NSpace, null, {
        default: () =>
          [
            '设备管理',
            '实施方案',
            '数据来源',
            '数据编辑',
            '数据校验',
            '报告生成',
            '报告审核',
          ].map((item) =>
            h(
              NButton,
              {
                type: 'primary',
                size: 'small',
                onClick: () => {
                  window.sessionStorage.setItem('task', JSON.stringify(row));
                  if (item === '实施方案') {
                    router.push('/scheme');
                  } else if (item === '校准证书') {
                    router.push('/certificate');
                  } else if (item === '设备管理') {
                    router.push('/equipment');
                  } else if (item === '数据来源') {
                    router.push('/data_source');
                  } else if (item === '数据编辑') {
                    router.push('/data_edit');
                  } else if (item === '数据校验') {
                    router.push('/data_checkout');
                  } else if (item === '报告生成') {
                    router.push('/report_create');
                  } else {
                    router.push('/report_audit');
                  }
                },
              },
              { default: () => item }
            )
          ),
      });
    },
  },
];
//搜索按钮
const searchFun = ()=>{
  queryData.page = 1
  getDataList();
}
// 分页数据源
const pagination = reactive({
  page: queryData.page,
  pageSize: queryData.page_z,
  itemCount: 0,
  onChange: (page) => {
    pagination.page = page;
    queryData.page = page;
    getDataList();
  },
});

// 任务管理（列表）
const getDataList = async () => {
  const { data: res } = await getTaskList(queryData);
  pagination.itemCount = res.Data.Num;
  data.value = res.Data.List || [];
};

getDataList();

let timer = setInterval(() => {
  getDataList();
}, 30000);

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style scoped></style>