W0407/vue/项目/vue-admin-template-master/src/views/message/messageList.vue

<template>
  <div class="levelList">
    <el-row>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="地址筛选">
          <el-select v-model="form.region" placeholder="请选择地址名称">
            <el-option
              v-for="item in addressList"
              :key="item.addressid"
              :label="item.addressname"
              :value="item.addressid"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="onSubmit" style="margin-left: 20px"
            >查询重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-button type="primary" @click="goAddress">添加消息</el-button>
      <el-button type="danger" @click="delAll">全部删除</el-button>
    </el-row>
    <el-table
      :data="list"
      v-if="list.length > 0"
      style="width: 80%"
      height="600"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column label="消息ID" prop="jrid"> </el-table-column>
      <el-table-column label="人员名称" prop="jrname"> </el-table-column>
      <el-table-column label="人员手机号" prop="jrtel"> </el-table-column>
      <el-table-column label="地址名称" prop="addressname"> </el-table-column>
      <el-table-column label="等级名称" prop="levelname"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
      <h1>请添加数据</h1>
    </div>
  </div>
</template>

<script>
import { getMessage, delMessage, searchAddress } from "@/api/message";
import { getAddress } from "@/api/address";
import { getLevel } from "@/api/level";
export default {
  data() {
    return {
      list: [],
      addressList: [],
      levelList: [],
      form: {
        region: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.form.region);
      searchAddress({
        jraddressesid: this.form.region,
      })
        .then((res) => {
          console.log(res, "res");
          if (res.code == 200) {
            this.list = res.data;
            this.level();
            this.address();
          }
        })
        .catch((err) => {
          throw new Error("错误");
        });
    },
    async init() {
      const dataPromise = [this.part1(), this.part2(), this.part3()];
      let [data1, data2, data3] = await Promise.all(dataPromise);
      this.list = data3;
      this.levelList = data1;
      this.addressList = data2;
      this.level();
      this.address();
    },
    async part1() {
      const api = await getLevel();
      return api.data.records;
    },
    async part2() {
      const api = await getAddress();
      return api.data.records;
    },
    async part3() {
      const api = await getMessage();
      return api.data.records;
    },
    level() {
      this.list.forEach((item) => {
        const row = this.levelList.find((l) => l.jrid === item.jrlevel);
        row && (item.levelname = row.levelname);
      });
    },
    address() {
      this.list.forEach((item) => {
        const target = this.addressList.find(
          (a) => a.addressid === item.jraddressesid
        );
        if (target) item.addressname = target.addressname;
      });
    },
    goAddress() {
      this.$router.push("/message/messageAdd");
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/message/messageAdd",
        query: {
          obj: row,
        },
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMessage([row.jrid])
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: "恭喜你，删除数据成功",
                  type: "success",
                });
                this.init();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delAll() {
      let newsId = this.list.map((item) => item.jrid);
      this.$confirm("此操作将永久删除所以数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMessage(newsId)
            .then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: "恭喜你，删除数据成功",
                  type: "success",
                });
                this.init();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.levelList {
  padding: 20px;
}
</style>