SaaS-lib/lib/saas/view/messageCenter/index.vue

<template>
  <div>
    <div class="ns-table-title">消息中心</div>
    <a-tabs v-model:activeKey="loginType" :destroyInactiveTabPane="true" class="tabs-list">
      <a-tab-pane v-for="(item, index) in typeName" :key="typeCode[index]" :tab="item">
        <ns-view-list-table ref="nsTableRef" v-bind="tableConfig">
          <template #bodyCell="data">
            <template v-if="data.column.dataIndex == 'status'">
              <div v-if="data.record.status == 1"> <div class="no-read"></div>未读 </div>
              <div v-if="data.record.status == 2"> <div class="readed"></div>已读 </div>
            </template>
            <template v-if="data.column.dataIndex == 'index'">{{ data.index + 1 }}</template>
          </template>
        </ns-view-list-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts" name="MessageCenterIndex">
  import { Modal } from 'ant-design-vue';
  import { ref, watch } from 'vue';
  import { dateUtil } from '/nerv-lib/util/date-util';
  import { http } from '/nerv-lib/util/http';
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';

  const props = defineProps({
    listTableApi: String,
    actionApi: Object,
  });

  let typeName = ['任务', '通知', '预警', '其他'];
  let typeCode = [13, 16, 18, 99];

  const nsTableRef = ref();
  const router = useRouter();
  const loginType = ref(typeCode[0]);

  const detailUrl = (record) => {
    // 服务通知 智慧社区
    if (record.tpCode == 'userSubmitVisitor') {
      router.push({ name: 'DoorwayAuditIndex' });
    }
    if (record.tpCode == 'accountBindRoom') {
      router.push({ name: 'CertificationAuditIndex' });
    }
    if (record.tpCode == 'workOrderCommit') {
      switch (record.messageBizUuid2) {
        case '1':
          router.push({ name: 'RepairOrderIndex' });
        case '2':
          router.push({ name: 'CleanOrderIndex' });
        case '3':
          router.push({ name: 'WashCleanWorkOrderIndex' });
        case '4':
          router.push({ name: 'WaterDeliveryOrderIndex' });
        case '5':
          router.push({ name: 'ProblemReportIndex' });
        case '6':
          router.push({ name: 'DecorateRegistrationIndex' });
        case '7':
          router.push({ name: 'CourierServiceIndex' });
        default:
          break;
      }
    }
    if (record.tpCode == 'feedbackCommit') {
      router.push({ name: 'ProblemReportIndex' });
    }
    if (record.tpCode == 'accountBindRoom') {
      router.push({ name: 'CertificationAuditIndex' });
    }
    if (record.tpCode == 'submitFurnishLog') {
      router.push({ name: 'DecorateRegistrationIndex' });
    }
    if (record.tpCode == 'workOrderCentCommit') {
      switch (record.messageBizUuid2) {
        case '1':
          router.push({ name: 'RepairOrderIndex' });
        case '2':
          router.push({ name: 'CleanOrderIndex' });
        case '3':
          router.push({ name: 'WashCleanWorkOrderIndex' });
        case '4':
          router.push({ name: 'WaterDeliveryOrderIndex' });
        case '5':
          router.push({ name: 'ProblemReportIndex' });
        case '6':
          router.push({ name: 'DecorateRegistrationIndex' });
        case '7':
          router.push({ name: 'CourierServiceIndex' });
        default:
          break;
      }
    }
    if (record.tpCode == 'accountPackInit') {
      router.push({ name: 'CourierServiceIndex' });
    }
    if (record.tpCode == 'entrustLeaseWebInit') {
      router.push({ name: 'LeaseApplicationIndex' });
    }
    if (record.tpCode == 'entrustLeaseRoomWebInit') {
      router.push({ name: 'RentalApplicationIndex' });
    }

    // 系统通知 智慧社区
    if (record.tpCode == 'patrolTaskTime') {
      router.push({ name: 'PatrolTaskIndex' });
    }
    if (record.tpCode == 'leaveCommit') {
      router.push({ name: '' }); // 缺失待补充
    }
    if (record.tpCode == 'leaveCommit') {
      router.push({ name: '' }); // 缺失待补充
    }
    if (record.tpCode == 'alarmReport') {
      router.push({ name: 'IncidentRecordIndex' });
    }
    if (record.tpCode == 'costStandardInit') {
      router.push({ name: 'CostCheckIndex' });
    }
    if (record.tpCode == 'roomCallBill') {
      router.push({ name: 'CostCallIndex' });
    }
    if (record.tpCode == 'attendanceRecord') {
      router.push({ name: '' }); // 缺失待补充
    }

    // 会议通知 会议中心
    let params = JSON.parse(record.params);
    if (record.tpCode == 'canHuiTongZhi') {
      router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'huiYiTiXing') {
      router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'huiYiQuXiao') {
      router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'riChengQuXiao') {
      router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'qianDaoChengGong') {
      router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'huiYiYuQi') {
      router.push({ name: 'MyConferenceIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'shenPiTongGuo') {
      router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'shenPiJuJue') {
      router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'shenPiGuoQi') {
      router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'huiYiShenPi') {
      router.push({ name: 'MeetingApprovalIndex', query: { meetingName: params.meetingName } });
    }
    if (record.tpCode == 'jiYaoFenXiang') {
      router.push({ name: 'MeetingListDetail', query: { id: params.summaryId } });
    }
    if (record.tpCode == 'huiYiCheXiao') {
      router.push({ name: 'MyReserveIndex', query: { meetingName: params.meetingName } });
    }

    // 设备通知 社区/养老
    if (record.tpCode == 'DeviceRuleAlarm') {
      router.push({ name: 'AlarmCenterIndex' });
    }
    if (record.tpCode == 'DeviceRuleAlarmTimeOut') {
      router.push({ name: 'AlarmCenterIndex' });
    }
  };

  watch(
    () => loginType.value,
    (val) => {
      tableConfig.value.params.type = val;
    },
    { deep: true },
  );

  const tableConfig = ref({
    api: props.listTableApi,
    // title: '消息中心',
    params: {
      type: loginType.value,
    },
    headerActions: [
      {
        label: '全部标记已读',
        name: 'MessageCenterReaded',
        type: 'primary',
        handle: () => {
          http
            .get(props.actionApi['MessageCenterUnRead'], { type: loginType.value })
            .then((res) => {
              if (res.data) {
                Modal.confirm({
                  title: '警告',
                  content: '确定设置全部消息已读吗？',
                  cancelText: '取消',
                  onOk: () => {
                    http
                      .post(props.actionApi['MessageCenterReaded'], { type: loginType.value })
                      .then((res) => {
                        nsTableRef.value.nsTableRef.reload();
                      });
                  },
                });
              } else {
                message.warn('暂无未读消息!', 3);
              }
            });
        },
      },
    ],
    rowSelection: null,
    resultField: 'data',
    scroll: { x: '100%' },
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        textNumber: 2,
      },
      {
        title: '消息内容',
        dataIndex: 'content',
        textEllipsis: true,
      },
      {
        title: '通知时间',
        dataIndex: 'messageTime',
        textNumber: 8,
        customRender: ({ value }) => {
          return dateUtil(value).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '模块来源',
        dataIndex: 'title',
        textNumber: 8,
      },
      {
        title: '消息状态',
        dataIndex: 'status',
        textNumber: 4,
        customRender: ({ value }) => {
          if (value == 1) {
            return '未读';
          }
          if (value == 2) {
            return '已读';
          }
        },
      },
    ],
    columnActions: {
      title: '操作',
      actions: [
        {
          label: '查看',
          name: 'MessageCenterDetail',
          handle: (record) => {
            http.post(props.actionApi['MessageCenterDetail'], { messageId: record.id }).then(() => {
              detailUrl(record);
            });
          },
        },
        {
          label: '删除',
          name: 'MessageCenterDelete',
          dynamicParams: {
            messageId: 'id',
          },
          confirm: {
            title: '提示',
            content: `确定删除该条消息吗？`,
          },
          isReload: true,
          api: props.actionApi['MessageCenterDelete'],
        },
      ],
    },
    formConfig: {
      schemas: [
        {
          label: '消息状态',
          field: 'status',
          component: 'NsSelect',
          defaultValue: '',
          componentProps: {
            options: [
              {
                label: '全部',
                value: '',
              },
              {
                label: '已读',
                value: 2,
              },
              {
                label: '未读',
                value: 1,
              },
            ],
          },
        },
      ],
    },
  });
</script>

<style lang="less" scoped>
  :deep(.ant-tabs-top > .ant-tabs-nav) {
    margin-bottom: 0;
    .ant-tabs-nav-wrap {
      padding-left: 24px;
    }
  }
  .no-read {
    width: 8px;
    height: 8px;
    background-color: #ff1744;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 1px;
  }

  .readed {
    width: 8px;
    height: 8px;
    background-color: #17be6b;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 1px;
  }

  .ns-table-title {
    text-align: left;
    height: 46px;
    line-height: 46px;
    //font-size: 16px;
    font-size: 18px;
    font-weight: bold;
    user-select: text;
    padding-left: 16px;
    background: #fff;
    width: calc(100% + 32px);
    margin-left: -16px;
    cursor: pointer;
  }

  .tabs-list {
    overflow: visible !important;
  }
  :deep(.ant-tabs-nav) {
    width: calc(100% + 32px);
    margin-left: -16px !important;
    background: #fff;
  }
  :deep(.ant-tabs-nav-wrap) {
    padding: 0 16px;
  }
</style>