jf-frock/src/views/Agreement/match/list.vue

<template>
  <div>
     <Toptitle title="匹配列表">
      <slot name="titleButton"> </slot>
    </Toptitle>
    <div class="match_list">
    <Row style="padding:10px 0">
      <Col span="5">
        <span>金螳螂ID：</span>
        <span>
          <Input clearable v-model="SearchInfo.jtl_id" style="width:140px"  />
        </span>
      </Col>
      <Col span="5">
        <span>项目编号：</span>
        <span>
          <Input clearable v-model="SearchInfo.order_no" style="width:140px"  />
        </span>
      </Col>
      <Col span="5">
        <span>项目名称：</span>
        <span>
          <Input clearable v-model="SearchInfo.abbreviation" style="width:140px"  />
        </span>
      </Col>
      <Col span="5">
        <span>项目简称：</span>
        <span>
          <Input clearable v-model="SearchInfo.project_title" style="width:140px"  />
        </span>
      </Col>
      <Col span="2" offset="2">
        <Button @click="initData(1)" type="primary" style="margin-right: 10px" size='small'
          >搜索</Button
        >
      </Col>
    </Row>
      <Table :columns="tableColumns" border :max-height="500" :data="tableData">
        <template slot="setSlot" slot-scope="{ row, index }">
          <a @click="handleSet(row, index, 1)" style="margin: 0 5px">匹配</a>
          <a @click="handleSet(row, index, 2)">查看</a>
        </template>
      </Table>
      <div class="total">总计<span>{{total}}</span>条数据</div>
      </div>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="page_index"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="page_size"
        />
      </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "matchList",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      SearchInfo: {
        project_short_title: "",
        project_name: "",
        project_number: "",
        matching_status: "",
      },
      tableColumns: [
        {
          title: "金螳螂ID",
          align: "center",
          key: "jtl_id",
         resizable: true,
                        width: 350
        },
        {
          title: "项目编号",
          align: "center",
          key: "order_no",
          resizable: true,
                        width: 350
        },
        {
          title: "项目名称",
          align: "center",
          key: "abbreviation",
          resizable: true,
                        width: 350
        },
       {
          title: "项目简称",
          align: "center",
          key: "project_title",
          resizable: true,
                        width: 350
        },
        { title: "操作", align: "center", minWidth: 150, slot: "setSlot" },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: null,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  methods: {
    initData(page) {
      if(page){
        this.page_index = 1
      }
      this.axios({
        method: "post",
        url: "/api/contract_match_list",
        params: { ...this.SearchInfo,page_index:this.page_index,page_size:this.page_size},
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSet(row, index, type) {
      switch (type) {
        case 1:
          this.$router.push({
            path: "/cms/Agreement/match/matching",
            query: {
              type,
              order_no:row.order_no
            },
          });
          break;
        case 2:
          this.$router.push({
            path: "/cms/Agreement/match/check",
            query: {
              type,
              order_no:row.order_no
            },
          });
          break;
      }
    },
    changeSize(e) {
      this.page_size = e;
      this.initData();
    },
    changePage(e) {
      this.page_index = e;
      this.initData();
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeRouteLeave(to, from, next) {
    if (
      to.path == "/cms/Agreement/match/matching"  || to.path == "/cms/Agreement/match/check"
    ) {
      next();
    } else {
      from.meta.keepAlive = false;
      next();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
span{
    font-size: 15px;
}
.total{
    margin-top:10px;
}
.total>span{
    color: #d9001b;
    font-size: 14px;
}
.content_body_page {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.match_list{
  height:80%;
  overflow: hidden;
}
/deep/ .ivu-col{
display: flex;
margin: 5px;
align-items: center;
}
/deep/ .ivu-col-span-6{
  flex: auto;
}
</style>