BST_bigScreen/src/views/leadMatch/MatchList/matchList.vue

<template>
  <div>
    <Row style="padding:10px 0">
      <Col span="5">
        <span>项目编号：</span>
        <span>
          <Input v-model="SearchInfo.order_no" style="width:150px" />
        </span>
      </Col>
      <Col span="5">
        <span>项目名称：</span>
        <span>
          <Input v-model="SearchInfo.project_title" style="width:150px" />
        </span>
      </Col>
      <Col span="5">
        <span>项目简称：</span>
        <span>
          <Input v-model="SearchInfo.project_short_title" style="width:150px" />
        </span>
      </Col>
      <Col span="5">
        <span>匹配状态：</span>
        <span>
          <Select
            filterable
            filter-by-label
            transfer
            v-model="SearchInfo.machining_state"
            style="width: 150px"
          >
            <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="back" type="primary" style="margin-right: 10px"
          >搜索</Button
        >
      </Col>
    </Row>
    <div>
      <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)" style="margin: 0 5px">查看</a>
          <a @click="handleSet(row, index, 3)">详情</a>
        </template>
      </Table>
      <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>
  </div>
</template>

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

export default {
  name: "matchList",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      SearchInfo: { order_no: "", project_title: "" },
      tableColumns: [
        { title: "项目编号", align: "center", key: "project_no", minWidth: 60 },
        {
          title: "项目名称",
          align: "center",
          key: "project_title",
          minWidth: 60,
        },
        {
          title: "项目简称",
          align: "center",
          key: "project_short_title",
          minWidth: 60,
        },
        {
          title: "匹配状态",
          align: "center",
          key: "machining_state",
          minWidth: 60,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.machining_state == 0
                ? "未匹配"
                : params.row.machining_state == 1
                ? "匹配中"
                : "匹配完成"
            );
          },
        },
        {
          title: "下生产状态",
          align: "center",
          key: "produce_state",
          minWidth: 60,
          render: (h, params) => {
            return h(
              "span",
              {},
              params.row.produce_state == 0
                ? "未下生产"
                : params.row.produce_state == 1
                ? "下生产中"
                : "下生产完成"
            );
          },
        },
        { title: "制单日期", align: "center", key: "crt_time", minWidth: 60 },
        { title: "操作", align: "center", minWidth: 100, slot: "setSlot" },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: null,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    initData() {
      this.axios({
        method: "get",
        url: "/api/bst_matching_list",
      }).then((res) => {
        if (res.code == 200) {
          console.log("res :>> ", res);
          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_no:row.project_no,
              project_title:row.project_title
            },
          });
          break;
        case 2:
          break;
        case 3:
          break;
      }
    },
    changeSize(e) {
      this.pageSize = e;
      this.initData();
    },
    changePage(e) {
      this.pageIndex = 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;
}
</style>