jf-frock/src/views/leadMatch/MatchList/matchList.vue

<template>
  <div>
     <Toptitle title="匹配列表">
      <slot name="titleButton"> </slot>
    </Toptitle>
    <div class="match_list">
    <Row style="padding:10px 0">
      <Col span="6">
        <span>项目编号：</span>
        <span>
          <Input clearable v-model="SearchInfo.project_number" style="width:140px" size="small"/>
        </span>
      </Col>
      <Col span="6">
        <span>项目名称：</span>
        <span>
          <Input clearable v-model="SearchInfo.project_name" style="width:140px" size="small"/>
        </span>
      </Col>
      <Col span="6">
        <span>项目简称：</span>
        <span>
          <Input clearable v-model="SearchInfo.project_short_title" style="width:140px" size="small"/>
        </span>
      </Col>
      <Col span="6">
        <span>匹配状态：</span>
        <span>
          <Select
            filterable
            filter-by-label
            clearable
            transfer
            v-model="SearchInfo.matching_status"
            style="width: 140px"
            size="small"
          >
            <Option label="未匹配" value="0"></Option>
            <Option label="匹配中" value="1"></Option>
            <Option label="匹配完成" value="2"></Option>
          </Select>
        </span>
      </Col>
      <Col span="2" offset="2">
        <Button @click="initData" 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>
      <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: "项目编号",
          align: "center",
          key: "project_number",
         resizable: true,
                        width: 250
        },
        {
          title: "项目名称",
          align: "center",
          key: "project_name",
          resizable: true,
                        width: 250
        },
        {
          title: "项目简称",
          align: "center",
          key: "project_short_title",
          resizable: true,
                        width: 250
        },
        // {
        //   title: "匹配状态",
        //   align: "center",
        //   key: "matching_status",
        //   minWidth: 60,
        //   render: (h, params) => {
        //     return h(
        //       "span",
        //       {},
        //       params.row.matching_status == 0
        //         ? "未匹配"
        //         : params.row.matching_status == 1
        //         ? "匹配中"
        //         : "匹配完成"
        //     );
        //   },
        // },
        // {
        //   title: "下生产状态",
        //   align: "center",
        //   key: "produce_status",
        //   minWidth: 60,
        //   render: (h, params) => {
        //     return h(
        //       "span",
        //       {},
        //       params.row.produce_status == 0
        //         ? "未下生产"
        //         : params.row.produce_status == 1
        //         ? "下生产中"
        //         : "下生产完成"
        //     );
        //   },
        // },
        {
          title: "制单日期",
          align: "center",
          key: "crt_time",
          resizable: true,
                        width: 250,
          render: (h, params) => {
            return h("span", {}, this.func.replaceDate(params.row.crt_time));
          },
        },
        { title: "操作", align: "center", minWidth: 60, slot: "setSlot" },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: null,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.axios({
        method: "get",
        url: "/api/bst_matching_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/leadMatch/MatchList/matchPage",
            query: {
              type,
              id: row.id,
              project_number: row.project_number,
              project_name: row.project_name,
            },
          });
          break;
        case 2:
          this.$router.push({
            path: "/cms/leadMatch/MatchList/matchCheck",
            query: {
              type,
              id: row.id,
              project_number: row.project_number,
              project_name: row.project_name,
            },
          });
          break;
      }
    },
    changeSize(e) {
      this.page_size = e;
      this.initData();
    },
    changePage(e) {
      this.page_index = e;
      this.initData();
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.content_body_page {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.match_list{
  height:620px;
  overflow: hidden;
}
/deep/ .ivu-col{
display: flex;
margin: 5px;
}
/deep/ .ivu-col-span-6{
  flex: auto;
}
</style>