index.vue

<template>
  <section class="store pagex">
    <div class="store-con">
      <!--搜索区-->
      <el-form :inline="true" :model="formParam" ref="formParam" label-width="80px">
        <el-form-item label="消息类型" prop="msg_type">
          <el-select v-model="formParam.msg_type" placeholder="全部" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="已选中报价消息" value="1"></el-option>
            <el-option label="已成单消息" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="create_time">
          <el-date-picker :unlink-panels=true style="width:193px" prefix-icon="prefix-icon-time-style" v-model="formParam.date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="resetForm('formParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表区-->
      <div class="data-box">
        <el-table :data="list" border max-height="600">
          <el-table-column prop="msg_sn" label="消息编号" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="msg_type" label="消息类型" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="160" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column label="操作" width="110" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="viewChange(scope.$index, scope.row)" class="yunyin-btn">查看内容</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
      </div>
    </div>
    <Menu/>
    <el-dialog title="消息详情" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1000px">
      <el-descriptions size="medium" border :column="2">
        <el-descriptions-item>
          <template slot="label">发件人</template>
          {{ msgDetail.sender }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">收件人</template>
          {{ msgDetail.recipient }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">时间</template>
          {{ msgDetail.create_time }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">大小</template>
          {{ msgDetail.size }}
        </el-descriptions-item>
      </el-descriptions>
      <p style="margin-top: 20px;padding-bottom: 10px;">{{ msgDetail.content }}</p>
    </el-dialog>
  </section>
</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import {Autocomplete, Button, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, MessageBox, Option, Pagination, Popover, Select, Table, TableColumn, Tag, Tooltip} from 'element-ui'

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm;

Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete).use(Popover).use(Tag).use(Divider);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Descriptions).use(DescriptionsItem);
export default {
  name: "news",
  data() {
    return {
      total: 0,
      page: 1,
      limit: 10,
      list: [],
      dialogVisible: false,
      msgDetail: {},
      formParam: {
        msg_type: '',
        date: ''
      }
    };
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      var params = Object.assign({},
          {page: this.page, limit: this.limit},
          this.formParam,
          {start_time: this.formParam.date ? this.formParam.date[0] : ''},
          {end_time: this.formParam.date ? this.formParam.date[1] : ''}
      );
      this.$http('GET', "/api/message/getMsgList", params).then(res => {
        if (res.code === 0) {
          this.list = res.data.list || [];
          this.total = Number(res.data.total) || 0;
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    getMsgDetail(msg_id) {
      this.$http('GET', "/api/message/getMsgDetail", {msg_id: msg_id}).then(res => {
        if (res.code === 0) {
          this.msgDetail = res.data;
          this.dialogVisible = true;
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    viewChange(index, row) {
      this.getMsgDetail(row.id);
    },
    onSubmit() {
      this.page = 1;
      this.getData();
    },
    resetForm(formName) {
      this.formParam.date = '';
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    }
  },
  components: {
    Menu
  }
};
</script>
<style scoped>

</style>