kd-aiot-frontend-wt/src/views/bpm/message/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <el-form
          label-width="100px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="状态：" prop="readStatus">
                <el-select
                  style="width: 100%"
                  v-model="params.readStatus"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option :value="1" label="已读"></el-option>
                  <el-option :value="0" label="未读"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="发送时间：" prop="createTime">
                <el-date-picker
                  v-model="params.createTime"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
            <el-col
              v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 12 }"
            >
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload('search')"
                >
                  查询
                </el-button>
                <el-button @click="reload('reset')">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
        <!-- <template v-slot:templateContent="{ row }">
          <el-link type="primary" :underline="false" @click="goDetail(row)">
            {{ row.templateContent }}
          </el-link>
        </template> -->

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            v-if="!row.readStatus"
            @click="handleAddOrEdit(row)"
          >
            已读
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            v-if="row.formPath"
            @click="handleAddOrEdit(row, row.formPath)"
          >
            处理
          </el-link>
        </template>
        <template v-slot:readStatus="{ row }">
          <el-tag v-if="row.readStatus" type="success">{{ '已读' }}</el-tag>
          <el-tag v-else type="danger">{{ '未读' }}</el-tag>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>
<script>
  import {
    notifyMessagePageAPI,
    updateNotifyMessageReadByIdAPI
  } from '@/api/bpm/task';
  import { mapGetters } from 'vuex';

  export default {
    data() {
      return {
        addOrEditDialogFlag: false,
        params: {
          createTime: null,
          readStatus: null
        },
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'templateContent',
            label: '消息',
            minWidth: '250',
            slot: 'templateContent'
          },
          {
            prop: 'readStatus',
            label: '状态',
            width: '80',
            align: 'center',
            slot: 'readStatus'
          },
          {
            prop: 'readTime',
            label: '阅读时间',
            width: '180',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'templateNickname',
            label: '发送人',
            width: '150',
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '发送时间',
            width: '180',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            slot: 'action',
            fixed: 'right'
          }
        ],
        searchForm: {},
        tableData: [],
        size: 10,
        page: 1,
        total: 0
      };
    },
    computed: {
      ...mapGetters(['user']),
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      //新增或修改模板
      async handleAddOrEdit(row, formPath) {
        await updateNotifyMessageReadByIdAPI([row.id]);
        if (formPath) {
          // 跨子系统跳转：使用 location.href 整页跳转
          this.goDetail(formPath);
          // window.location.href = formPath;
          // return;
        }
        this.$refs.table.reload();
      },
      reload(type) {
        if (type == 'reset') {
          this.params = {
            createTime: null,
            readStatus: null
          };
        }
        this.$refs.table.reload({ page: 1, where: this.params });
      },

      goDetail(formPath) {
        if (!formPath) return;
        // 获取当前子系统的路由 base 前缀
        const routerBase = this.$router.options.base || '/';
        // 判断目标路径是否属于当前子系统（以当前子系统 base 开头或不含 /page- 前缀）
        const isCurrentApp =
          formPath.startsWith(routerBase) || !formPath.startsWith('/page-');
        if (isCurrentApp) {
          // 本系统内跳转：去掉 base 前缀后使用 router.push
          const innerPath = formPath.startsWith(routerBase)
            ? formPath.slice(routerBase.length - 1)
            : formPath;
          this.$router.push(innerPath);
        } else {
          // 跨子系统跳转：使用 location.href 整页跳转，让主应用重新加载目标子系统
          window.location.href = formPath;
        }
      },

      datasource({ page, where, limit, ...row }) {
        return notifyMessagePageAPI({
          ...where,
          pageNum: page,
          size: limit,
          userId: this.user.info.userId
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .app-container {
    background: #f0f3f3;
    min-height: calc(100vh - 84px);
  }

  .zw-page-table {
    background: #ffffff;
    padding-top: 20px;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .table {
    width: 100%;
    margin-top: 10px;
  }
</style>