1、消息确认页面完成所有布局及功能 2、通过调整刷新页面的登出账号方式为路由跳转至登录页面，以试图解决token过期后无法正常跳转的问题（未在现场调试）

zhuzhuanzhuan

2024-03-08 16696b259e984e86d07ae981d031d0c54bdc7089

1、消息确认页面完成所有布局及功能
2、通过调整刷新页面的登出账号方式为路由跳转至登录页面，以试图解决token过期后无法正常跳转的问题（未在现场调试）

 src/components/tools/UserMenu.vue

@@ -185,7 +185,7 @@
            return that.Logout({}).then(() => {
              // update-begin author:wangshuai date:20200601 for: é€€å‡ºç™»å½•è·³è½¬ç™»å½•é¡µé¢
              that.$router.push({ path: '/user/login' });
              window.location.reload()
              // window.location.reload()
              // update-end author:wangshuai date:20200601 for: é€€å‡ºç™»å½•è·³è½¬ç™»å½•é¡µé¢
            }).catch(err => {
              that.$message.error({

 src/utils/request.js

@@ -79,7 +79,8 @@
        if (token) {
          store.dispatch('Logout').then(() => {
            setTimeout(() => {
              window.location.reload()
              router.push({ path: '/user/login' });
              // window.location.reload()
            }, 1500)
          })
        }
@@ -169,7 +170,10 @@
            onOk: () => {
              store.dispatch('Logout').then(() => {
                Vue.ls.remove(ACCESS_TOKEN)
                window.location.reload()
                setTimeout(() => {
                  router.push({ path: '/user/login' });
                  // window.location.reload()
                }, 1500)
              })
            }
          })

 src/views/mdc/base/MdcMessageApproval.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,177 @@
<template>
  <a-card :bordered="false">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :span="6">
            <a-form-item label="设备编号">
              <a-input placeholder="请输入设备编号" v-model="queryParam.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="消息状态">
              <a-select v-model='queryParam.msgStatus' placeholder="请选择消息状态">
                <a-select-option v-for="item in msgStatusOptionList" :value="item.value">{{item.title}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      size="default"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange">
      <span slot="action" slot-scope="text, record">
        <a @click="showModal(record,0)">查看</a>
        <a-divider type="vertical" v-if="record.hasProcess||record.hasConfirm"></a-divider>
        <a @click="showModal(record,1)" v-if="record.hasProcess">上报</a>
        <a-divider type="vertical" v-if="record.hasConfirm&&record.hasProcess"></a-divider>
        <a @click="showModal(record,2)" v-if="record.hasConfirm">确认</a>
        <!--<a @click="showModal(record,0)">查看</a>-->
        <!--<a-divider type="vertical"></a-divider>-->
        <!--<a @click="showModal(record,1)">上报</a>-->
        <!--<a-divider type="vertical"></a-divider>-->
        <!--<a @click="showModal(record,2)">确认</a>-->
      </span>
    </a-table>
    <mdc-message-approval-modal ref="modalRef" :title="modalTitle" :visible="modalVisible" :buttonId="buttonId"
                                @closeModal="modalVisible = false" @formHasSubmitted="loadData"/>
  </a-card>
</template>

<script>
  import { getAction, putAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import MdcMessageApprovalModal from './modules/MdcMessageApproval/MdcMessageApprovalModal'

  export default {
    name: 'MdcMessageApproval',
    mixins: [JeecgListMixin],
    components: { MdcMessageApprovalModal },
    data() {
      return {
        description: 'mdc消息确认页面',
        queryParam: {},
        columns: [
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
          },
          {
            title: '标题',
            align: 'center',
            dataIndex: 'titile'
          }, {
            title: '内容',
            align: 'center',
            dataIndex: 'msgContent',
            width: 450
          }, {
            title: '原因',
            align: 'center',
            dataIndex: 'reportContent',
            width: 450
          }, {
            title: '处理人',
            align: 'center',
            dataIndex: 'senderNames'
          }, {
            title: '确认人',
            align: 'center',
            dataIndex: 'approverNames'
          }, {
            title: '状态',
            align: 'center',
            dataIndex: 'msgStatus',
            customRender: function(text) {
              if (text == '0') {
                return '待处理'
              } else if (text == '1') {
                return '待确认'
              } else if (text == '2') {
                return '已确认'
              } else {
                return '已拒绝'
              }
            }
          }, {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }],
        url: {
          list: '/mdc/mdcMessageApproval/list'
        },
        loading: false,
        msgStatusOptionList: [],
        modalTitle: '',
        modalVisible: false,
        buttonId: null
      }
    },
    created() {
      this.initDictData('mdcMsgStatus')
    },
    methods: {
      /**
       * è°ƒç”¨æŽ¥å£èŽ·å–数据字典配置msgStatus
       * @param dictCode æ•°æ®å­—典编号
       */
      initDictData(dictCode) {
        //根据字典Code, åˆå§‹åŒ–字典数组
        ajaxGetDictItems(dictCode, null).then((res) => {
          if (res.success) {
            console.log('res================', res)
            this.msgStatusOptionList = res.result
          }
        })
      },

      /**
       * ç‚¹å‡»æŒ‰é’®å±•ç¤ºå¼¹çª—
       * @param record ç‚¹å‡»è¡Œä¿¡æ¯
       * @param buttonId æŒ‰é’®Id（查看：0，上报：1，确认：2）
       */
      showModal(record, buttonId) {
        this.buttonId = buttonId
        switch (buttonId) {
          case 0:
            this.modalTitle = '消息内容'
            break
          case 1:
            this.modalTitle = '上报原因'
            break
          case 2:
            this.modalTitle = '确认消息'
            break
          default:
            this.modalTitle = '消息内容'
        }
        this.$refs.modalRef.formParams = Object.assign({}, record)
        this.modalVisible = true
      }
    }
  }
</script>

 src/views/mdc/base/modules/MdcMessageApproval/MdcMessageApprovalModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,144 @@
<template>
  <a-modal :title="title"
           :maskClosable="true"
           @cancel="closeModal"
           :visible="visible"
           :footer="null">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :form="form" :model="formParams" :rules="validatorRules">
        <a-form-model-item label="设备编号" :labelCol="{span: 4}" :wrapperCol="{span: 8}">
          <a-input v-model="formParams.equipmentId" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="标题" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
          <a-input v-model="formParams.titile" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="内容" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
          <a-input v-model="formParams.msgContent" disabled></a-input>
        </a-form-model-item>

        <a-form-model-item label="原因" :labelCol="{span: 4}" :wrapperCol="{span: 20}" prop="reportContent"
                           v-if="buttonId===1">
          <a-textarea v-model="formParams.reportContent" :disabled="buttonId!==1"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="原因" :labelCol="{span: 4}" :wrapperCol="{span: 20}" v-else>
          <a-textarea v-model="formParams.reportContent" :disabled="buttonId!==1"></a-textarea>
        </a-form-model-item>

        <a-form-model-item label="确认" :labelCol="{span: 4}" :wrapperCol="{span: 12}" prop="isConfirm"
                           v-if="buttonId==2">
          <a-select v-model='formParams.isConfirm' placeholder="请选择是否确认">
            <a-select-option value="2">确认</a-select-option>
            <a-select-option value="3">拒绝</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <div class="drawer-bottom-button" v-show="buttonId!==0">
      <a-popconfirm title="确定放弃操作？" @confirm="closeModal" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-modal>
</template>

<script>
  import { postAction } from '@/api/manage'

  export default {
    name: 'MdcMessageApprovalModal',
    props: {
      visible: {
        type: Boolean
      },
      title: {
        type: String
      },
      buttonId: {
        type: Number
      }
    },
    data() {
      return {
        form: this.$form.createForm(this),
        formParams: {
          equipmentId: '',
          titile: '',
          msgContent: '',
          reportContent: '',
          msgStatus: '',
          isConfirm: ''
        },
        confirmLoading: false,
        validatorRules: {
          reportContent: [
            { required: true, message: '请输入上报原因' }
          ],
          isConfirm: [
            { required: true, message: '请选择是否确认' }
          ]
        },
        url: {
          reportUrl: '/mdc/mdcMessageApproval/reportReason',
          confirmUrl: '/mdc/mdcMessageApproval/handleConfirm'
        }
      }
    },
    methods: {
      closeModal() {
        this.$refs.form.clearValidate()
        this.$emit('closeModal')
      },
      handleSubmit() {
        const that = this
        // è§¦å‘表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            this.formParams.msgStatus = this.formParams.isConfirm
            let obj
            if (this.buttonId === 1) {
              obj = postAction(this.url.reportUrl, this.formParams)
            } else {
              obj = postAction(this.url.confirmUrl, this.formParams)
            }
            obj.then((res) => {
              if (res.success) {
                that.$notification.success({
                  message: '消息',
                  description: res.message
                })
                that.$emit('formHasSubmitted')
              } else {
                that.$notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            }).finally(() => {
              that.confirmLoading = false
              that.closeModal()
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .drawer-bottom-button {
    position: absolute;
    bottom: -25px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>