Browse Source

no message

Andy 3 years ago
parent
commit
f25931ad0b
1 changed files with 942 additions and 0 deletions
  1. 942 0
      src/views/newpage/MatchList/matchPage.vue

+ 942 - 0
src/views/newpage/MatchList/matchPage.vue

@@ -0,0 +1,942 @@
+<template>
+  <div>
+    <Toptitle title="匹配">
+      <Button
+        @click="handleAutoMatching"
+        v-if="currencyTag == 1"
+        type="primary"
+        style="margin-right: 10px"
+        >自动匹配</Button
+      >
+      <Button @click="back" v-else type="primary" style="margin-right: 10px"
+        >撤销匹配</Button
+      >
+      <Button @click="back" type="primary" ghost style="margin-right: 10px"
+        >返回</Button
+      >
+    </Toptitle>
+    <div class="top-info">
+      <Row align="middle">
+        <Col span="4">
+          <span>项目编号:</span><span>{{ info.project_no }}</span>
+        </Col>
+        <Col span="4"
+          ><span>项目名称:</span><span>{{ info.project_title }}</span>
+        </Col>
+        <Col span="6" v-if="currencyTag == 1">
+          <span>图号:</span>
+          <span>
+            <Select
+              filterable
+              multiple
+              transfer
+              filter-by-label
+              v-model="info.image_number"
+              :max-tag-count="2"
+              style="width: 200px"
+            >
+              <Option
+                v-for="(item, index) in urlSelectList"
+                :key="index"
+                :label="item"
+                :value="item"
+              ></Option>
+            </Select>
+          </span>
+        </Col>
+        <Col span="6" v-if="currencyTag == 1">
+          <span>产品名称:</span>
+          <span>
+            <Select
+              filterable
+              multiple
+              transfer
+              filter-by-label
+              v-model="info.product_name"
+              :max-tag-count="2"
+              style="width: 200px"
+            >
+              <Option
+                v-for="(item, index) in productList"
+                :key="index"
+                :label="item"
+                :value="item"
+              ></Option>
+            </Select>
+          </span>
+        </Col>
+        <Col span="4" v-if="currencyTag == 1">
+          <Button @click="handleSearchUnmatchedInfo" type="primary"
+            >确认</Button
+          >
+        </Col>
+      </Row>
+    </div>
+    <div class="context-tabs">
+      <Tabs type="card" @on-click="handleTabsClick" v-model="currencyTag">
+        <Button @click="back" type="primary" size="small" slot="extra">
+          匹配
+        </Button>
+        <TabPane label="本次未匹配" name="1">
+          <Row>
+            <Col
+              span="16"
+              style="border-top: 1px solid #adb5bd;border-right: 1px solid #adb5bd;padding:10px"
+            >
+              <div>
+                <h1>码单信息</h1>
+                <div class="context-unmatched-sheet">
+                  <div
+                    v-for="url_info in unmatchedObj.urlList"
+                    :key="url_info.id"
+                    style="padding-top:10px"
+                  >
+                    <Row type="flex" align="middle">
+                      <Col span="4">
+                        <span>图号:</span><span>{{ url_info.number }}</span>
+                      </Col>
+                      <Col span="6">
+                        <span>产品名称:</span
+                        ><span>{{ url_info.product_name }}</span>
+                      </Col>
+                      <Col span="4" offset="6">
+                        <span>
+                          总计
+                          <span style="color:red">{{
+                            url_info.product_detail_num
+                          }}</span>
+                          条数据
+                        </span>
+                      </Col>
+                      <Col span="4">
+                        <Button
+                          @click="handleShowCurrencySheet(url_info)"
+                          size="small"
+                          type="text"
+                          >{{ url_info.isCurrenct ? "收缩" : "展开" }}</Button
+                        >
+                        <Icon
+                          size="20"
+                          :type="
+                            url_info.isCurrenct
+                              ? 'md-arrow-dropdown'
+                              : 'md-arrow-dropright'
+                          "
+                          style="vertical-align: middle;"
+                        />
+                      </Col>
+                    </Row>
+                    <div
+                      v-if="url_info.isCurrenct"
+                      class="context-unmatched-sheet-search"
+                    >
+                      <Row type="flex" align="middle">
+                        <Col span="6">
+                          <span>特殊尺寸:</span>
+                          <span>
+                            <Select
+                              filterable
+                              filter-by-label
+                              transfer
+                              v-model="info.wool_size"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in wool_size"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="6">
+                          <span>部件名称:</span>
+                          <span>
+                            <Select
+                              filterable
+                              multiple
+                              filter-by-label
+                              transfer
+                              v-model="info.part_name"
+                              :max-tag-count="2"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in part_name"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="6">
+                          <span>精裁尺寸:</span>
+                          <span>
+                            <Select
+                              filterable
+                              filter-by-label
+                              transfer
+                              v-model="info.cut_size"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in cut_size"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="6">
+                          <Button
+                            @click="getSheetDetailList(url_info)"
+                            size="small"
+                            type="primary"
+                          >
+                            搜索
+                          </Button>
+                        </Col>
+                      </Row>
+                    </div>
+                    <div
+                      v-if="url_info.isCurrenct"
+                      class="context-unmatched-sheet-table"
+                    >
+                      <div
+                        v-for="table_info in unmatchedObj.part_list"
+                        :key="table_info.id"
+                      >
+                        <div>
+                          <Row type="flex" align="middle">
+                            <Col span="10" style="padding:10px 0">
+                              <span>匹配信息:</span>
+                              <span
+                                v-for="(match_info, index) in table_info.key
+                                  .list"
+                                :key="index"
+                              >
+                                {{ match_info.key }}:{{ match_info.value }}
+                              </span>
+                            </Col>
+                            <Col span="3" offset="11">
+                              总计{{ table_info.key.num }}条数据
+                            </Col>
+                          </Row>
+                        </div>
+                        <div>
+                          <Table
+                            :columns="unmatchedSheetTableColumns"
+                            border
+                            :max-height="500"
+                            @on-selection-change="handleSelectChange"
+                            :data="table_info.part_list"
+                          ></Table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Col>
+            <Col span="8">
+              <div style="border-top: 1px solid #adb5bd;padding:10px">
+                <h1>房间信息</h1>
+                <div class="context-unmatched-room">
+                  <div
+                    v-for="url_info in unmatchedObj.urlList"
+                    :key="url_info.id"
+                    style="padding-top:10px"
+                  >
+                    <Row type="flex" align="middle">
+                      <Col span="4">
+                        <span>图号:</span><span>{{ url_info.number }}</span>
+                      </Col>
+                      <Col span="8">
+                        <span>产品名称:</span
+                        ><span>{{ url_info.product_name }}</span>
+                      </Col>
+                      <Col span="6" offset="2">
+                        <span>
+                          总计
+                          <span style="color:red">{{
+                            url_info.house_num
+                          }}</span>
+                          条数据
+                        </span>
+                      </Col>
+                      <Col span="4">
+                        <Button
+                          @click="handleShowCurrencySheet(url_info)"
+                          size="small"
+                          type="text"
+                          >{{ url_info.isCurrenct ? "收缩" : "展开" }}</Button
+                        >
+                        <Icon
+                          size="20"
+                          :type="
+                            url_info.isCurrenct
+                              ? 'md-arrow-dropdown'
+                              : 'md-arrow-dropright'
+                          "
+                          style="vertical-align: middle;"
+                        />
+                      </Col>
+                    </Row>
+                    <div
+                      v-if="url_info.isCurrenct"
+                      class="context-unmatched-room-search"
+                    >
+                      <Row type="flex" align="middle">
+                        <Col span="12" style="padding:10px 0">
+                          <span>区域名称:</span>
+                          <span>
+                            <Select
+                              filterable
+                              multiple
+                              filter-by-label
+                              transfer
+                              v-model="info.region"
+                              :max-tag-count="2"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in regionList"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="12" style="padding:10px 0">
+                          <span>房号:</span>
+                          <span>
+                            <Select
+                              filterable
+                              multiple
+                              filter-by-label
+                              transfer
+                              v-model="info.number"
+                              :max-tag-count="2"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in number"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="12" style="padding:10px 0">
+                          <span>特殊尺寸:</span>
+                          <span>
+                            <Select
+                              filterable
+                              filter-by-label
+                              transfer
+                              v-model="info.wool_size"
+                              size="small"
+                              style="width: 120px"
+                            >
+                              <Option
+                                v-for="(item, index) in wool_size"
+                                :key="index"
+                                :label="item"
+                                :value="item"
+                              ></Option>
+                            </Select>
+                          </span>
+                        </Col>
+                        <Col span="12" style="padding:10px 0">
+                          <Button @click="back" size="small" type="primary"
+                            >搜索</Button
+                          >
+                        </Col>
+                      </Row>
+                    </div>
+                    <div
+                      v-if="url_info.isCurrenct"
+                      class="context-unmatched-room-table"
+                    >
+                      <div>
+                        <Table
+                          :columns="unmatchedRoomTableColumnsUsed"
+                          border
+                          :max-height="500"
+                          @on-selection-change="handleSelectChange"
+                          :data="unmatchedRoomList.house_list"
+                        ></Table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Col>
+          </Row>
+        </TabPane>
+        <TabPane label="本次已匹配" name="2">
+          <Row type="flex" align="middle" style="padding:10px 0">
+            <Col span="4">
+              <span>图号:</span>
+              <span>
+                <Select
+                  filterable
+                  multiple
+                  filter-by-label
+                  transfer
+                  v-model="matchedInfo.image_number"
+                  :max-tag-count="2"
+                  size="small"
+                  style="width: 150px"
+                >
+                  <Option
+                    v-for="(item, index) in urlMatchedList"
+                    :key="index"
+                    :label="item"
+                    :value="item"
+                  ></Option>
+                </Select>
+              </span>
+            </Col>
+            <Col span="4">
+              <span>产品名称:</span>
+              <span>
+                <Select
+                  filterable
+                  multiple
+                  filter-by-label
+                  transfer
+                  v-model="matchedInfo.product_name"
+                  :max-tag-count="2"
+                  size="small"
+                  style="width: 150px"
+                >
+                  <Option
+                    v-for="(item, index) in productMatchedList"
+                    :key="index"
+                    :label="item"
+                    :value="item"
+                  ></Option>
+                </Select>
+              </span>
+            </Col>
+            <Col span="2">
+              <Button @click="back" size="small" type="primary">
+                搜索
+              </Button>
+            </Col>
+          </Row>
+          <div
+            v-for="matched_info in matchedList"
+            :key="matched_info.number"
+            class="matched-block"
+          >
+            <Row>
+              <Col span="2">
+                <Checkbox v-model="matched_info.isSelect">全选</Checkbox>
+              </Col>
+              <Col span="2">
+                <span>图号:{{ matched_info.image_number }}</span>
+              </Col>
+              <Col span="2">
+                <span>产品名称:{{ matched_info.product_name }}</span>
+              </Col>
+              <Col span="2" offset="14">
+                总计
+                <span style="color:red">{{ matched_info.num }}</span>
+                条数据
+              </Col>
+              <Col span="2">
+                <Button
+                  @click="handleShowCurrencyMatched(matched_info)"
+                  size="small"
+                  type="text"
+                  >{{ matched_info.isCurrenct ? "收缩" : "展开" }}</Button
+                >
+                <Icon
+                  size="20"
+                  :type="
+                    matched_info.isCurrenct
+                      ? 'md-arrow-dropdown'
+                      : 'md-arrow-dropright'
+                  "
+                  style="vertical-align: middle;"
+                />
+              </Col>
+            </Row>
+            <Row style="margin-top:20px" v-if="matched_info.isCurrenct">
+              <Col span="4">
+                <span>区域名称:</span>
+                <span>
+                  <Select
+                    filterable
+                    multiple
+                    transfer
+                    filter-by-label
+                    v-model="matchedInfo.region"
+                    :max-tag-count="2"
+                    size="small"
+                    style="width: 150px"
+                  >
+                    <Option
+                      v-for="(item, index) in regionMatchedList"
+                      :key="index"
+                      :label="item"
+                      :value="item"
+                    ></Option>
+                  </Select>
+                </span>
+              </Col>
+              <Col span="4">
+                <span>房号:</span>
+                <span>
+                  <Select
+                    filterable
+                    multiple
+                    transfer
+                    filter-by-label
+                    v-model="matchedInfo.number"
+                    :max-tag-count="2"
+                    size="small"
+                    style="width: 150px"
+                  >
+                    <Option
+                      v-for="(item, index) in numberMatchedList"
+                      :key="index"
+                      :label="item"
+                      :value="item"
+                    ></Option>
+                  </Select>
+                </span>
+              </Col>
+              <Col span="4">
+                <span>部件名称:</span>
+                <span>
+                  <Select
+                    filterable
+                    multiple
+                    transfer
+                    filter-by-label
+                    v-model="matchedInfo.part_name"
+                    :max-tag-count="2"
+                    size="small"
+                    style="width: 150px"
+                  >
+                    <Option
+                      v-for="(item, index) in partNameMatchedList"
+                      :key="index"
+                      :label="item"
+                      :value="item"
+                    ></Option>
+                  </Select>
+                </span>
+              </Col>
+              <Col span="2">
+                <Button @click="back" size="small" type="primary">
+                  搜索
+                </Button>
+              </Col>
+            </Row>
+            <div v-if="matched_info.isCurrenct">
+              <div
+                v-for="(matched_detail, index) in matchedDetailList"
+                :key="index"
+              >
+                <Row type="flex" align="middle">
+                  <Col span="10" style="padding:10px 0">
+                    <span>匹配信息:</span>
+                    <span>匹配信息:</span>
+                    <span>匹配信息:</span>
+                    <span>匹配信息:</span>
+                    <span>匹配信息:</span>
+                  </Col>
+                </Row>
+                <Table
+                  :columns="matchedSheetTableColumns"
+                  border
+                  :max-height="500"
+                  @on-selection-change="handleSelectChange"
+                  :data="matched_detail.detail"
+                >
+                  <template slot="setSlot" slot-scope="{ row, index }">
+                    <a @click="handleMatchedSet(row, index, 5)">撤销匹配 </a>
+                  </template>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </TabPane>
+      </Tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
+// 例如:import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: "",
+  components: {},
+  props: {},
+  // import引入的组件需要注入到对象中才能使用
+  data() {
+    // 这里存放数据
+    return {
+      currencyTag: "1", //当前分页
+      info: {
+        id: this.$route.query.id,
+        project_no: this.$route.query.project_no,
+        project_title: this.$route.query.project_title,
+        cut_size: "",
+        number: "",
+        part_name: "",
+        region: "",
+        wool_size: "",
+        image_number: [],
+        product_name: [],
+      },
+      matchedInfo: {
+        image_number: [],
+        product_name: [],
+      },
+      cut_size: [], //精裁尺寸 未匹配
+      number: [], //房号 未匹配
+      part_name: [], //部件名称 未匹配
+      regionList: [], //区域名称 未匹配
+      wool_size: [], //毛料尺寸 未匹配
+      urlSelectList: [], //图号列表 未匹配
+      productList: [], //产品列表 未匹配
+      urlMatchedList: [], //图号列表 已匹配
+      productMatchedList: [], //产品列表 已匹配
+      regionMatchedList: [], //区域列表 已匹配
+      numberMatchedList: [], //房号列表 已匹配
+      partNameMatchedList: [], //部件列表 已匹配
+      unmatchedObj: {
+        urlList: [], //图号列表
+        part_list: [
+          { part_list: [{ title: 1 }], key: { list: [], num: null } },
+          { part_list: [{ title: 1 }], key: { list: [], num: null } },
+        ], //当前图号下表格列表
+      }, //码单信息
+      unmatchedRoomList: {
+        urlList: [], //图号列表
+        house_list: [{ title: 1 }], //当前图号下表格列表
+      }, //房间信息
+      matchedList: [
+        {
+          number: "123",
+          product_name: "321",
+          isSelect: false,
+          product_detail_num: 1,
+          detail: [
+            {
+              title: "333",
+            },
+          ],
+        },
+        {
+          number: "aaa",
+          product_name: "vvv",
+          isSelect: true,
+          product_detail_num: 2,
+          detail: [
+            {
+              title: "ddd",
+            },
+          ],
+        },
+      ],
+      matchedDetailList: [],
+      unmatchedSheetTableColumns: [
+        { title: "全选", align: "center", minWidth: 60, type: "selection" },
+        { title: "序号", align: "center", type: "index", minWidth: 60 },
+        { title: "部件名称", align: "center", key: "part_name", minWidth: 100 },
+        { title: "行号", align: "center", key: "line", minWidth: 60 },
+        { title: "木皮1", align: "center", key: "skin1", minWidth: 60 },
+        {
+          title: "原材料",
+          align: "center",
+          minWidth: 80,
+          render: (h, params) => {
+            return h("span", {}, params.row.board1 + params.row.board2);
+          },
+        },
+        { title: "木皮2", align: "center", key: "skin2", minWidth: 60 },
+        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 80 },
+        {
+          title: "原料数量",
+          align: "center",
+          key: "wool_number",
+          minWidth: 80,
+        },
+        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 80 },
+        {
+          title: "零部件数量",
+          align: "center",
+          key: "cut_number",
+          minWidth: 90,
+        },
+        {
+          title: "未匹配数量",
+          align: "center",
+          key: "unbind_number",
+          minWidth: 90,
+        },
+        { title: "贴皮面积", align: "center", key: "stick", minWidth: 80 },
+        { title: "精裁面积", align: "center", key: "cut", minWidth: 80 },
+        { title: "工艺要求", align: "center", key: "remark", minWidth: 80 },
+      ], //未匹配码单表头
+      unmatchedRoomTableColumns: [
+        { title: "全选", align: "center", minWidth: 60, type: "selection" },
+        { title: "序号", align: "center", type: "index", minWidth: 60 },
+        { title: "区域", align: "center", key: "region", minWidth: 60 },
+        { title: "房号", align: "center", key: "number", minWidth: 60 },
+      ], //未匹配房间表头
+      unmatchedRoomTableColumnsUsed: [],
+      matchedSheetTableColumns: [
+        { title: "全选", align: "center", minWidth: 60, type: "selection" },
+        { title: "序号", align: "center", type: "index", minWidth: 60 },
+        { title: "区域名称", align: "center", key: "region", minWidth: 100 },
+        { title: "房号", align: "center", key: "number", minWidth: 60 },
+        { title: "部件名称", align: "center", key: "part_name", minWidth: 80 },
+        { title: "行号", align: "center", key: "line", minWidth: 60 },
+        { title: "木皮1", align: "center", key: "skin1", minWidth: 60 },
+        {
+          title: "原材料",
+          align: "center",
+          minWidth: 80,
+          render: (h, params) => {
+            return h("span", {}, params.row.board1 + params.row.board2);
+          },
+        },
+        { title: "木皮2", align: "center", key: "skin2", minWidth: 80 },
+        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 80 },
+        {
+          title: "原料数量",
+          align: "center",
+          key: "wool_number",
+          minWidth: 80,
+        },
+        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 80 },
+        {
+          title: "零部件数量",
+          align: "center",
+          key: "cut_number",
+          minWidth: 90,
+        },
+        { title: "贴皮面积", align: "center", key: "stick", minWidth: 80 },
+        { title: "精裁面积", align: "center", key: "cut", minWidth: 80 },
+        { title: "工艺要求", align: "center", key: "remark", minWidth: 80 },
+        {
+          title: "操作",
+          align: "center",
+          key: "title",
+          minWidth: 80,
+          slot: "setSlot",
+        },
+      ], //匹配表头
+      unmatchedSelectedList: [],
+    };
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {},
+  methods: {
+    back() {
+      this.$router.go(-1);
+    },
+    handleSelectChange(selection) {
+      this.unmatchedSelectedList = this.unmatchedSelectedList.concat(
+        selection.map((v) => {
+          return v.product_title;
+        })
+      );
+      //  = Array.from(
+      //         new Set([...res.data.support_remark, ...this.support_remark])
+      //       );
+    },
+    handleTabsClick(name) {
+      name == 2 &&
+        this.axios
+          .get("/api/bst_matching_on_product_list", {
+            params: { id: this.info.id },
+          })
+          .then((res) => {
+            res.data.list.map((v) => {
+              v.isCurrenct = false;
+            });
+            this.matchedList = res.data.list;
+            this.urlMatchedList = res.data.image_number;
+            this.productMatchedList = res.data.product_name;
+            console.log(res);
+          });
+    },
+    handleShowCurrencySheet(row) {
+      console.log("row :>> ", row);
+      if (row.isCurrenct) {
+        row.isCurrenct = !row.isCurrenct;
+      } else {
+        this.unmatchedObj.urlList.map((v) => (v.isCurrenct = false));
+        row.isCurrenct = true;
+      }
+      this.getSheetDetailList(row);
+    },
+    handleShowCurrencyMatched(row) {
+      console.log("row :>> ", row);
+      if (row.isCurrenct) {
+        row.isCurrenct = !row.isCurrenct;
+      } else {
+        this.matchedList.map((v) => (v.isCurrenct = false));
+        row.isCurrenct = true;
+      }
+      this.getMatchedDetailList(row);
+    },
+    getSheetDetailList(row) {
+      row.isCurrenct &&
+        this.axios
+          .get("/api/bst_matching_un_product_detail", {
+            params: {
+              cut_order_product_id: row.id,
+              id: this.info.id,
+              cut_size: this.info.cut_size,
+              number: this.info.number,
+              part_name: this.info.part_name,
+              region: this.info.region,
+              wool_size: this.info.wool_size,
+            },
+          })
+          .then((res) => {
+            this.unmatchedObj.part_list = res.data.part_list;
+            this.unmatchedRoomList.house_list = res.data.house_list;
+            this.unmatchedRoomTableColumnsUsed = this.unmatchedRoomTableColumns.concat(
+              res.data.head_word.map((v) => {
+                return { title: v, align: "center", key: v, minWidth: 60 };
+              })
+            );
+            this.cut_size = res.data.search_word.cut_size;
+            this.number = res.data.search_word.number;
+            this.part_name = res.data.search_word.part_name;
+            this.regionList = res.data.search_word.region;
+            this.wool_size = res.data.search_word.wool_size;
+          });
+    },
+    getMatchedDetailList(row) {
+      row.isCurrenct &&
+        this.axios
+          .get("/api/bst_matching_on_product_detail", {
+            params: {
+              cut_order_product_id: row.id || 14,
+              id: this.matchedInfo.id,
+              number: this.matchedInfo.number,
+              part_name: this.matchedInfo.part_name,
+              region: this.matchedInfo.region,
+            },
+          })
+          .then((res) => {
+            this.regionMatchedList = res.data.region;
+            this.numberMatchedList = res.data.number;
+            this.partNameMatchedList = res.data.part_name;
+            this.matchedDetailList = res.data.list;
+            console.log("res :>> ", res);
+          });
+    },
+    handleSearchUnmatchedInfo() {
+      this.axios({
+        method: "get",
+        url: "/api/bst_matching_un_product_list",
+        params: {
+          id: this.info.id,
+          image_number: this.info.image_number,
+          product_name: this.info.product_name,
+        },
+      }).then((res) => {
+        if (res.code == 200) {
+          console.log("res :>> ", res);
+          res.data.list.map((v) => (v.isCurrenct = false));
+          this.unmatchedObj.urlList = res.data.list;
+          this.urlSelectList = res.data.image_number;
+          this.productList = res.data.product_name;
+        }
+      });
+    },
+    handleAutoMatching() {
+      this.axios
+        .post("/api/matching_product_house", {
+          id: this.info.id,
+          image_number: this.info.image_number,
+          product_title: this.info.product_name,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$Message.success(res.msg);
+            this.handleSearchUnmatchedInfo();
+          }
+        });
+    },
+    handleMatchedSet(row, index, type) {},
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
+};
+</script>
+
+<style lang="scss" scoped>
+.top-info {
+  padding: 10px;
+  font-size: 18px;
+}
+.context-tabs {
+  position: relative;
+  max-height: 650px;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 15px;
+  margin: 10px;
+  margin-bottom: 30px;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px 1px #999;
+  // 未匹配样式
+  .context-unmatched-sheet-table,
+  .context-unmatched-room-table {
+  }
+  .context-unmatched-sheet-search,
+  .context-unmatched-room-search {
+    padding: 10px 0;
+  }
+  // 匹配样式
+  .matched-block {
+    padding: 15px;
+    margin-bottom: 30px;
+    background-color: #e9ecef;
+    border-radius: 5px;
+  }
+}
+/deep/.ivu-tabs-nav-scroll {
+  display: flex;
+  justify-content: center;
+}
+/deep/.ivu-table-cell {
+  padding: 0;
+}
+</style>