jonhon-mes-web/src/views/desk/myMessage.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      v-model:page="page"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @selection-change="selectionChange"
      @on-load="onLoad"
    >
        <template #status="{row}">
            <el-tag v-if="row.status === 1" type="info">已读</el-tag>
            <el-tag v-if="row.status === 2" type="success">未读</el-tag>
        </template>
        <template #menu-left>
            <el-button type="primary"  @click="handleRead">标记已读</el-button>
        </template>
        <template #content="{row}">
            <span @click="hanleView(row)" style="color:#284c89;cursor:pointer">{{row.content}}</span>
        </template>
    </avue-crud>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      selectionList: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        align: "center",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: true,
        editBtn: true,
        editBtnText: "修改",
        editBtnIcon: " ",
        delBtnIcon: " ",
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        // dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        menu:false,

        column: [
          {
            label: '标题',
            prop: 'title',
            sortable: false,
            filter: true,
            span: 12,
            search: true,
            searchLabelWidth: 90,
            display:false,
          },
          {
            label: '内容',
            prop: 'content',
            sortable: false,
            filter: true,
            span: 12,
            width:600,
            search: false,
            overHidden:true,
            searchLabelWidth: 90,
            display:false,
          },
          
          {
            label: '消息类型',
            prop: 'type',
            sortable: false,
            type: 'select',
            filter: true,
            span: 24,
            search: true,
            searchLabelWidth: 90,
            dicData: [
              { label: '系统消息', value: 1 },
              { label: '业务消息', value: 2 },
            ],
          },
          {
            label: '状态',
            prop: 'status',
            sortable: false,
            type:"select",
            display:false,
            dicData: [
              {
                label: '已读',
                value: '1',
              },
              {
                label: '未读',
                value: '2',
              },
            ],
            filter: true,
            span: 12,
            search: true,
            searchLabelWidth: 90,
          },
          {
            label: '发送时间',
            prop: 'approvalTime',
            type: 'date',
            format:"YYYY-MM-DD",
            valueFormat:"YYYY-MM-DD",
            searchRange:true,
            sortable: false,
            filter: true,
            search: true,
            span:24,
            searchLabelWidth: 90,
          },
          {
            label: '内容',
            prop: 'content',
            component: 'avue-ueditor',
            action: '/blade-resource/oss/endpoint/put-file',
            propsHttp: {
              res: 'data',
              url: 'link',
            },
            hide: true,
            minRows: 4,
            span: 24,
          },
        ],
      },
      data: [],
    };
  },
  methods: {
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    selectionChange(list){
        this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad();
    },
    hanleView(row){
        this.$refs.crud.rowView(row)
    },
    handleRead(){
        if(this.selectionList.length == 0){
            this.$message.error('请至少选择一条数据！');
            return
        }
        let tmp = this.selectionList.find(item => item.status == 1)
        if(tmp){
            this.$message.error('请选择状态为【未读】的数据！')
            return
        }
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.data = [
        {
          id: 1,
          type: 1,
          title: '请审核张三提交的外协审批流程',
          content:"审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息",
          createUser: '张三',
          status:1,
          approvalTime:"2026-01-18 22:15:30",
          createTime: '2026-01-05 09:06:32',
        },
        {
          id: 2,
          type: 2,
          title: '请审核李四提交的仓管审批流程',
          content:"审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息",
          createUser: '张三',
          status:1,
          approvalTime:"2026-01-18 22:15:30",
          createTime: '2026-01-12 09:06:32',
        },
        {
          id: 3,
          type: 1,
          title: '请审核王五提交的槽液审批流程',
          content:"审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息审批信息",
          createUser: '张三',
          status:2,
          approvalTime:"2026-01-18 22:15:30",
          createTime: '2026-01-15 09:06:32',
        },
      ];
      this.page.total = this.data.length;
      this.loading = false;
    },
  },
};
</script>

<style></style>