lab-ops-ui-web/src/views/desk/message.vue

<template>
    <basic-container>
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 :page.sync="page"
                 ref="crud"
                 @row-del="rowDel"
                 v-model="form"
                 :permission="permissionList"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 :before-open="beforeOpen"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
        <template slot-scope="scope" slot="status">
            <el-tag :type="scope.row.status == 0 ? 'danger' : 'success'">{{ scope.row.status == 0 ? '未读' : '已读' }}</el-tag>
        </template>
        <template slot-scope="scope" slot="messageType">
            <el-tag :type="scope.row.messageType == 1 ? 'success' : ''">{{ scope.row.messageType == 1 ? '维修' : '维保' }}</el-tag>
        </template>
        <template slot="menuLeft">
          <el-button type="primary"
                     size="small"
                     v-if="permission.notice_delete"
                     @click="handleSuccess">一键已读
          </el-button>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button size="small" @click="handleRead(row)">已 读 </el-button>
        </template>
        <template slot-scope="{row}"
                  slot="category">
          <el-tag>{{row.categoryName}}</el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </template>
  
  <script>
    // import {getList, remove, update, add, getNotice} from "@/api/desk/notice";
    import {messTotal,getList,messOver,overAll} from '@/api/desk/message'
    import {mapGetters} from "vuex";
    export default {
      data() {
        return {
          form: {},
          query: {},
          loading: true,
          page: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          selectionList: [],
          option: {
            height: 'auto',
            calcHeight: 30,
            dialogWidth: 950,
            tip: false,
            searchShow: true,
            searchMenuSpan: 6,
            border: true,
            index: true,
            viewBtn: false,
            editBtn:false,
            delBtn:false,
            selection: true,
            excelBtn: true,
            addBtn:false,
            dialogClickModal: false,
            column: [
                {
                    label: "单号",
                    prop: "no",
                    span: 24,
                    overHidden:true
                },
              {
                label: "消息内容",
                prop: "content",
                span: 24,
                overHidden:true
              },
              {
                label: "消息类型",
                prop: "messageType",
                span: 24,
                slot:true
              },
              {
                label: "消息状态",
                prop: "status",
                type:'select',
                span: 24,
                slot:true,
                search:true,
                dicData:[
                    {
                        label:'已读',
                        value:'1'
                    },
                    {
                        label:'未读',
                        value:'0'
                    }
                ]
              },
              {
                label: "消息时间",
                prop: "createTime",
                span: 24,
              },
              {
                label: "消息时间",
                prop: "releaseTimeRange",
                type: "date",
                format: "yyyy-MM-dd",
                valueFormat: "yyyy-MM-dd",
                searchRange:true,
                hide: true,
                addDisplay: false,
                editDisplay: false,
                viewDisplay: false,
                search: true,
                rules: [{
                    required: true,
                    message: "请输入通知时间",
                    trigger: "blur"
                }]
                },
            ]
          },
          data: []
        };
      },
      computed: {
        ...mapGetters(["permission"]),
        permissionList() {
          return {
            addBtn: this.vaildData(this.permission.notice_add, false),
            viewBtn: this.vaildData(this.permission.notice_view, false),
            delBtn: this.vaildData(this.permission.notice_delete, false),
            editBtn: this.vaildData(this.permission.notice_edit, false)
          };
        },
        ids() {
          let ids = [];
          this.selectionList.forEach(ele => {
            ids.push(ele.id);
          });
          return ids.join(",");
        }
      },
      methods: {
        rowSave(row, done, loading) {
          add(row).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            done();
          }, error => {
            window.console.log(error);
            loading();
          });
        },
        rowUpdate(row, index, done, loading) {
          update(row).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            done();
          }, error => {
            window.console.log(error);
            loading();
          });
        },
        rowDel(row) {
          this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              return remove(row.id);
            })
            .then(() => {
              this.onLoad(this.page);
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            });
        },
        searchReset() {
          this.query = {};
          this.onLoad(this.page);
        },
        searchChange(params, done) {
          this.query = params;
          this.page.currentPage = 1;
          this.onLoad(this.page, params);
          done();
        },
        selectionChange(list) {
          this.selectionList = list;
        },
        selectionClear() {
          this.selectionList = [];
          this.$refs.crud.toggleSelection();
        },
        handleRead(row){
            if(row.status == 1){
                this.$message.warning('当前消息状态已读，请选择未读的消息')
            }else{
                this.$confirm("确定将选择数据已读?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    messOver({
                        id:row.id,
                        status:1
                    }).then(res =>{
                        if(res.data.code == 200){
                           this.$message.success('操作成功!')
                           this.onLoad(this.page) 
                        }
                    })
                }).catch(() =>{

                })
            }
        },
        handleSuccess(){
            overAll().then(res =>{
                if(res.data.code == 200){
                    this.$message.success('操作成功')
                }
            })
        },
        beforeOpen(done, type) {
          if (["edit", "view"].includes(type)) {
            getNotice(this.form.id).then(res => {
              this.form = res.data.data;
            });
          }
          done();
        },
        currentChange(currentPage) {
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
          this.page.pageSize = pageSize;
        },
        refreshChange() {
          this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
          const {releaseTimeRange} = this.query;
          let values = {};
          if (releaseTimeRange) {
            values = {
              startTime: releaseTimeRange[0],
              endTime: releaseTimeRange[1],
              status:this.query.status ? this.query.status : null
            };
            values.releaseTimeRange = null;
          }else{
            values = {
                status:this.query.status ? this.query.status : null
            };
          }
          this.loading = true;
          getList({current:page.currentPage, size:page.pageSize,...values}).then(res => {
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.list;
            this.loading = false;
          });
        }
      }
    };
  </script>
  
  <style>
  </style>