vue-admin-template/src/views/message/messageList.vue

<template>
  <div>
    <h1 class="list-title">信息列表</h1>
    <hr>
    <div v-show="isShow">
      <div class="list-select">
        <span>地址筛选器</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.addressid"
            :label="item.addressname"
            :value="item.addressid">
          </el-option>
        </el-select>
        <el-button @click="searchMessage">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 900px" max-height="250" class="list-table">
        <el-table-column fixed prop="jrid" label="信息ID" width="150">
        </el-table-column>
        <el-table-column prop="jrname" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="jrtel" label="电话号码" width="120">
        </el-table-column>
        <el-table-column prop="levelname" label="等级名称" width="120">
        </el-table-column>
        <el-table-column prop="addressname" label="地址名称" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="updateRow(scope.row)" type="text" size="small">
              修改
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="!isShow">
      <p>暂时没有信息</p>
    </div>
  </div>
</template>

<script>
import { getMessageList, deleteMessage,getMessagesByAddressid} from '@/api/message'
import {getAddressList} from '@/api/address'
import {getLevelList} from '@/api/level'
export default {
  methods: {
    searchMessage() {
      if (this.value != '') {
        getMessagesByAddressid({
          searchid: this.value
        }).then(res => {
          if (res.code == 101) {
            let currentAddressname = ''
            this.options.forEach((item) => {
              if (item.addressid == this.value) 
                currentAddressname = item.addressname
            })
            this.tableData = res.data.map(item => {
              this.levelBox.forEach(elem => {
                if (item.jrlevel == elem.jrid) {
                  item.levelname = elem.levelname
                }
              })
              item.addressname = currentAddressname
              return item
            })
          } else if (res.code == 0) {
            this.tableData = [] 
          } else {
            this.$message.error(res.message);
          }
        }).catch(err => {
          this.$message.error(err.message);
        })
      } else {
        this.showMessageList()
      }
    },
    updateRow(row) {
      this.$router.push({
        name: 'UpdateMessage',
        params: {
          id: row.jrid,
          addressValue: this.value 
        }
      })
    },
    deleteRow(row) {
      deleteMessage({
        id: row.jrid
      }).then(res => {
        if (res.code == 101) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.searchMessage();
        }else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    showMessageList() {
      getMessageList().then(res => {
        if (res.code == 101) {
          this.tableData = res.data
        } else {
          this.isShow = false
        }
      }).catch(err => {
        console.log('err', err)
      })
    },
    getOptions() {
      getAddressList().then(res => {
        if (res.code == 101) {
          this.options = res.data
          this.options.unshift({
            addressid: '',
            addressname: '> 所有地址 <',
            longitude: undefined,
            latitude: undefined
          })
        }
      }).catch(err => {
        this.$message.error('系统错误');
      })
    },
    initLevelBox() {
      getLevelList().then(res => {
        if (res.code == 101) 
          this.levelBox = res.data
        else if (res == 0) 
          this.levelBox = []
      }).catch(err => {
        console.log(err)
      }) 
    }
  },
  data() {
    return {
      tableData: [],
      isShow: true,
      options: [],
      value: '',
      levelBox: []
    }
  },
  created() {
    this.value = this.$route.params.value || ''
    this.searchMessage()
    this.getOptions()
    this.initLevelBox()
  }
}
</script>

<style scoped lang="scss">
.list-title {
  text-align: center;
  color: #4f4e4e;
  font-weight: normal;
}

.list-table {
  margin: 0 auto;
}

.list-select {
  transform: translateX(400px);
  padding: 50px 0;

  button {
    margin-left: 10px;
  }

  span {
    margin-right: 10px;
  }
}
</style>