web/src/views/my-workbenches/workbenches/message-reminder/index.vue

<template>
  <div class="message-reminder flex flex-col h-full">
    <div class="page-action">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="[
          'page-tab',
          {
            'is-active': params.status === item.value,
            'is-mark': item.value === 'false' && workStore.counts.notice,
          },
        ]"
        @click="switchTab(item)"
        >{{ item.label }}</div
      >
    </div>
    <SearchForm :fields="fields" :params="params">
      <template #service="{ item, params }">
        <select-service-unit
          v-model="params[item.prop]"
          clearable
        ></select-service-unit>
      </template>
    </SearchForm>
    <div v-loading="loading" class="page-wrap flex-1">
      <MessageList
        :tableData="tableData"
        :pagination="pagination"
        :onChange="onChange"
      ></MessageList>
    </div>
  </div>
</template>

<script setup name="MessageReminder">
import { reactive, computed, ref } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { getMyMessages } from '@/api/my-workbenches';
import { MESSAGE_TYPE } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import MessageList from './message-list.vue';
import { useWorkStore } from '@/store';

const workStore = useWorkStore();
const tabs = [
  {
    label: '全部',
    value: 'undefined',
  },
  {
    label: '未读',
    value: 'false',
  },
  {
    label: '已读',
    value: 'true',
  },
];

const params = reactive({
  types: [],
  serviceId: '',
  custom: '',
  status: 'undefined',
});

const transParams = computed(() => {
  let types = params.types.join(',');
  if (!types.length && params.status === 'undefined') {
    types = Object.keys(MESSAGE_TYPE).join();
  }
  let status = eval(params.status);
  return { ...params, types, status };
});
const {
  loading: loading,
  pagination: pagination,
  tableData: tableData,
  onChange: onChange,
  search: search,
} = useFetchTable(getMyMessages, {
  params: transParams,
});

const switchTab = (tab) => {
  params.status = tab.value;
  search();
};
const fields = ref([
  {
    prop: 'types',
    label: '消息类型',
    type: 'multipleSelect',
    labelWidth: 100,
    colSpan: 5,
    options: dictToOptionList(MESSAGE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    cell: 'service',
  },
  {
    prop: 'custom',
    label: '客户名称',
    labelWidth: 100,
    colSpan: 5,
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '查询',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);
</script>