admin-cms/src/views/institution/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="debt">
        <el-col :span="24" class="top">
          <topInfo :topTitle="topTitle" :display="display"></topInfo>
        </el-col>
        <el-col :span="24" class="search">
          <searchInfo></searchInfo>
        </el-col>
        <el-col :span="24" class="main">
          <newsInfo :debtTable="debtTable" :total="total" @handleClick="handleClick"></newsInfo>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import topInfo from '@/layout/common/topInfo.vue';
import searchInfo from '@/layout/common/searchInfo.vue';
import newsInfo from '@/layout/institution/newsInfo.vue';
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('institution');
export default {
  name: 'index',
  props: {},
  components: {
    topInfo, //头部导航
    searchInfo, //搜素
    newsInfo, //
  },
  data: () => ({
    display: 'none',
    topTitle: '金融机构',
    debtTable: [],
    total: 1,
  }),
  created() {
    // this.search();
    // this.searchstatus1();
    // this.searchelse();
  },
  computed: {
    status() {
      return this.$route.params.status;
    },
  },
  watch: {
    // status(news) {
    //   if (news == 1) {
    //     this.search();
    //   }
    // },
    status: {
      handler(oval) {
        console.log(oval);
        this.debtTable = [];
        console.log(this.debtTable);

        if (oval == 0) {
          console.log('if');
          this.search();
        } else if (oval == 1) {
          console.log('elseif');
          this.searchstatus1();
        } else {
          console.log('else');
          this.searchelse();
        }
      },
      //立刻
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 修改
    ...mapActions(['query', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      console.log(status);

      const res = await this.query({ skip, limit, ...info });
      console.log(res.data);
      var weishenhe = res.data.filter(item => item.type === '0');

      this.$set(this, `debtTable`, weishenhe);
    },
    async searchstatus1({ skip = 0, limit = 10, ...info } = {}) {
      console.log(status);

      const res = await this.query({ skip, limit, ...info });
      console.log(res.data);
      var weishenhe = res.data.filter(item => item.type === '1');

      this.$set(this, `debtTable`, weishenhe);
    },
    async searchelse({ skip = 0, limit = 10, ...info } = {}) {
      console.log(status);

      const res = await this.query({ skip, limit, ...info });
      console.log(res.data);
      var weishenhe = res.data.filter(item => item.type === '2');
      console.log(weishenhe);

      this.$set(this, `debtTable`, weishenhe);
    },

    handleClick(newid) {
      this.$router.push({ path: '/institution/detail', query: { id: newid } });
    },
  },
};
</script>

<style lang="less" scoped>
.debt {
  padding: 20px;
}
.top {
  border-bottom: 1px solid #ccc;
}
</style>