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

<template>
  <div>
    <Toptitle title="匹配">
      <Button
        @click="handleAutoMatching"
        v-show="currencyTag == 1"
        type="primary"
        style="margin-right: 10px"
        >自动匹配</Button
      >
      <Button
        v-show="currencyTag != 1"
        @click="handleMatchedSelectAll(isMatchedSelectAll)"
        type="primary"
        :ghost="!isMatchedSelectAll"
        style="margin-right: 10px"
        >{{ isMatchedSelectAll ? "取消选中" : "全部选中" }}</Button
      >
      <Button
        @click="handleMatchedSet({}, 0, 5)"
        v-show="currencyTag != 1"
        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" type="flex" justify="start">
        <Col style="margin-right:20px">
          <span>项目编号：</span><span>{{ info.project_number }}</span>
        </Col>
        <Col style="margin-right:20px">
          <span>项目名称：</span><span>{{ info.project_name }}</span>
        </Col>
        <Col style="margin-right:20px" v-if="currencyTag == 1">
          <span>图号：</span>
          <span>
            <Select
              filterable
              multiple
              clearable
              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 style="margin-right:20px" v-if="currencyTag == 1">
          <span>产品名称：</span>
          <span>
            <Select
              filterable
              multiple
              clearable
              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 style="margin-right:20px" v-if="currencyTag == 1">
          <Button
            @click="
              handleSearchUnmatchedInfo();
              isClickMatch = false;
            "
            type="primary"
          >
            确认
          </Button>
        </Col>
      </Row>
    </div>
    <div class="context-tabs">
      <Tabs type="card" @on-click="handleTabsClick" v-model="currencyTag">
        <Button
          @click="handleIsAllowHandingMatch"
          type="primary"
          size="small"
          slot="extra"
          v-show="currencyTag == 1"
        >
          匹配
        </Button>
        <TabPane label="未匹配" name="1">
          <Row>
            <Col
              span="16"
              style="border-top: 1px solid #adb5bd;border-right: 1px solid #adb5bd;padding:10px"
            >
              <div class="sheet-block">
                <h1>码单信息</h1>
                <div class="context-unmatched-sheet">
                  <div
                    v-for="url_info in unmatchedObj.urlList"
                    :key="url_info.id"
                    v-show="url_info.product_detail_num > 0"
                    style="padding-top:10px"
                  >
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <span>图号：</span>
                        <span>{{ url_info.image_number }}</span>
                      </Col>
                      <Col span="4">
                        <span>产品名称：</span>
                        <span>{{ url_info.product_name }}</span>
                      </Col>
                      <Col span="4">
                        <span>批量数：</span>
                        <span>{{ url_info.number }}</span>
                      </Col>
                      <Col span="2">
                        <span>区域：</span>
                        <span>{{ url_info.region }}</span>
                      </Col>
                      <Col span="2" offset="4">
                        <span>
                          总计
                          <span style="color:red">{{
                            url_info.product_detail_num
                          }}</span>
                          条数据
                        </span>
                      </Col>
                      <Col span="4">
                        <Button
                          @click="handleShowCurrencySheet(url_info, 1)"
                          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
                              clearable
                              v-model="info.wool_size1"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in wool_size1"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="6">
                          <span>部件名称：</span>
                          <span>
                            <Select
                              filterable
                              multiple
                              filter-by-label
                              clearable
                              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
                              clearable
                              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, 1)"
                            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>
                              <span>{{ table_info.key.num }}组</span>
                            </Col>
                            <Col span="3" offset="8">
                              总计{{ table_info.part_list.length }}条数据
                            </Col>
                            <Col span="3">
                              <Button
                                @click="handleHiddenSheetDetail(table_info)"
                                size="small"
                                type="text"
                              >
                                {{ !table_info.isHidden ? "展开2" : "收缩" }}
                              </Button>
                            </Col>
                          </Row>
                        </div>
                        <div v-show="table_info.isHidden">
                          <Table
                            :columns="unmatchedSheetTableColumns"
                            border
                            :max-height="500"
                            :data="table_info.part_list"
                          ></Table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
            <Col span="8">
              <div
                class="room-block"
                style="border-top: 1px solid #adb5bd;padding:10px"
              >
                <h1>房间信息</h1>
                <div class="context-unmatched-room">
                  <div
                    v-for="url_info in unmatchedObj.urlList"
                    v-show="url_info.house_num > 0"
                    :key="url_info.id"
                    style="padding-top:10px"
                  >
                    <Row type="flex" align="middle">
                      <Col span="4">
                        <span>图号：</span
                        ><span>{{ url_info.image_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, 2)"
                          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>
                    <Row>
                      <Col span="4">
                        <span>批量数：</span>
                        <span>{{ url_info.number }}</span>
                      </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
                              clearable
                              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
                              clearable
                              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
                              clearable
                              transfer
                              v-model="info.wool_size2"
                              size="small"
                              style="width: 120px"
                            >
                              <Option
                                v-for="(item, index) in wool_size2"
                                :key="index"
                                :label="item"
                                :value="item"
                              ></Option>
                            </Select>
                          </span>
                        </Col>
                        <Col span="12" style="padding:10px 0">
                          <Button
                            @click="getSheetDetailList(url_info, 2)"
                            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
                  clearable
                  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
                  clearable
                  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="handleMatchedListInit"
                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-show="matched_info.produce_status == 0"
                  v-model="matched_info.isSelect"
                  @on-change="(e) => handleMatchedSelect(matched_info, e)"
                  >选择</Checkbox
                >
              </Col>
              <Col span="2">
                <span>图号：{{ matched_info.image_number }}</span>
              </Col>
              <Col span="4">
                <span>产品名称：{{ matched_info.product_name }}</span>
              </Col>
              <Col span="2">
                <span>区域:{{ matched_info.region }}</span>
              </Col>
              <Col span="2" offset="8">
                <Button
                  @click="handleMatchedSet(matched_info, -1, 5)"
                  type="primary"
                  size="small"
                  :disabled="matched_info.produce_status > 0"
                  style="margin-right: 10px"
                  >撤销匹配</Button
                >
              </Col>
              <Col span="2">
                总计
                <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
                    clearable
                    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
                    clearable
                    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
                    clearable
                    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="getMatchedDetailList(matched_info)"
                  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
                      v-for="(matched_info, index) in matched_detail.special"
                      :key="index"
                    >
                      {{ matched_info.key }}={{ matched_info.value }}
                    </span>
                    <span>{{ matched_detail.num }}组</span>
                  </Col>
                  <Col span="2" offset="12" style="padding:10px 0">
                    <Button
                      @click="handleHiddenMatchedDetail(matched_detail)"
                      size="small"
                      type="text"
                    >
                      {{ !matched_detail.isHidden ? "展开" : "收缩" }}
                    </Button>
                  </Col>
                </Row>
                <Table
                  v-show="matched_detail.isHidden"
                  :columns="matchedSheetTableColumns"
                  border
                  :ref="'matched' + index"
                  :max-height="500"
                  :data="matched_detail.detail"
                >
                  <!-- @on-selection-change="handleMatchedSelectChange" -->
                  <!-- <template slot="setSlot" slot-scope="{ row, index }">
                    <a @click="handleMatchedSet(row, index, 5)">撤销匹配 </a>
                  </template> -->
                </Table>
              </div>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
    <Modal width="80" v-model="showHandingMatchModal" title="手动匹配确认">
      <div>
        <Row style="padding:10px 0 ">
          <Col span="8">部件名称：{{ currentChooseTitle }}</Col>
          <Col span="6">未匹配数量：{{ currentChooseNumber }}</Col>
          <Col span="4"
            >余：{{ currentChooseNumber - currentChooseNumberUsed }}</Col
          >
          <Col span="4" offset="2">
            <Button size="small" @click="handleHandingMatchAVG">
              平均分配
            </Button>
          </Col>
        </Row>
      </div>
      <div>
        <Table
          :columns="unmatchedRoomTableColumnsModal"
          border
          :max-height="500"
          :data="unmatchedSelectedList"
        >
          <template slot="numSlot" slot-scope="{ index }">
            <Input
              @on-change="handleHandingMatchNumChange"
              v-model="unmatchedSelectedList[index].num"
            />
          </template>
        </Table>
      </div>
      <div slot="footer">
        <Button @click="showHandingMatchModal = false">取消</Button>
        <Button type="primary" @click="handleHandingMatch">确定</Button>
      </div>
    </Modal>
  </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_number: this.$route.query.project_number,
        project_name: this.$route.query.project_name,
        cut_size: "",
        number: "",
        part_name: "",
        region: "",
        wool_size1: "",
        wool_size2: "",
        image_number: [],
        product_name: [],
      },
      matchedInfo: {
        id: this.$route.query.id,
        image_number: [],
        product_name: [],
      },
      cut_size: [], //精裁尺寸 未匹配
      number: [], //房号 未匹配
      part_name: [], //部件名称 未匹配
      regionList: [], //区域名称 未匹配
      wool_size1: [], //毛料尺寸 未匹配
      wool_size2: [], //毛料尺寸 已匹配
      urlSelectList: [], //图号列表 未匹配
      productList: [], //产品列表 未匹配
      urlMatchedList: [], //图号列表 已匹配
      productMatchedList: [], //产品列表 已匹配
      regionMatchedList: [], //区域列表 已匹配
      numberMatchedList: [], //房号列表 已匹配
      partNameMatchedList: [], //部件列表 已匹配
      unmatchedObj: {
        urlList: [], //图号列表
        part_list: [], //当前图号下表格列表
      }, //码单信息
      unmatchedRoomList: {
        urlList: [], //图号列表
        house_list: [{ title: 1 }], //当前图号下表格列表
      }, //房间信息
      currentChooseId: "", //选中码单信息中的ID
      currentChooseNumber: 0, //选中码单信息中的ID
      currentChooseTitle: "", //选中码单信息中的ID
      currentChooseNumberUsed: "",
      matchedList: [],
      matchedDetailList: [],
      unmatchedSheetTableColumns: [
        {
          title: "选择",
          align: "center",
          minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChooseId == id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentChooseId = params.row.id;
                    self.currentChooseNumber = params.row.unbind_number;
                    self.currentChooseTitle = params.row.part_name;
                  },
                },
              }),
            ]);
          },
        },
        { title: "序号", align: "center", type: "index", minWidth: 60 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 100 },
        { title: "行号", align: "center", key: "line", minWidth: 70 },
        { 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: "house", minWidth: 60 },
        { title: "单元", align: "center", key: "unit", minWidth: 60 },
        { title: "楼层", align: "center", key: "layer", 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: "house_number", minWidth: 100 },
        { title: "部件名称", align: "center", key: "part_name", minWidth: 100 },
        { title: "行号", align: "center", key: "line", minWidth: 80 },
        { title: "木皮1", align: "center", key: "skin1", minWidth: 100 },
        {
          title: "原材料",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h("span", {}, params.row.board1 + ";" + params.row.board2);
          },
        },
        { title: "木皮2", align: "center", key: "skin2", minWidth: 100 },
        { title: "毛料尺寸", align: "center", key: "wool_size", minWidth: 100 },
        {
          title: "原料数量",
          align: "center",
          key: "wool_number",
          minWidth: 80,
        },
        { title: "精裁尺寸", align: "center", key: "cut_size", minWidth: 100 },
        {
          title: "零部件数量",
          align: "center",
          key: "num",
          minWidth: 80,
        },
        { title: "贴皮面积", align: "center", key: "stick", minWidth: 100 },
        { title: "精裁面积", align: "center", key: "cut", minWidth: 100 },
        { title: "工艺要求", align: "center", key: "remark", minWidth: 60 },
        // {
        //   title: "操作",
        //   align: "center",
        //   key: "title",
        //   minWidth: 80,
        //   slot: "setSlot",
        // },
      ], //匹配表头
      unmatchedRoomTableColumnsModal: [],
      unmatchedSelectedList: [],
      matchedSelectedList: [],
      showHandingMatchModal: false,
      isMatchedSelectAll: false,
      matchedReopenTag: "",
      matchedReopenList: [],
      isClickMatch: true,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.handleSearchUnmatchedInfo();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleSelectChange(selection) {
      this.unmatchedSelectedList = selection;
      this.unmatchedSelectedList.map((v) => (v.num = ""));
    },
    handleMatchedSelectChange(selection) {
      this.matchedSelectedList = this.matchedSelectedList.concat(
        selection.map((v) => {
          return v.cut_order_product_id;
        })
      );
    },
    handleTabsClick(name) {
      name == 2 && this.handleMatchedListInit();
      name == 1 && this.handleSearchUnmatchedInfo();
    },
    handleMatchedListInit() {
      this.axios
        .get("/api/bst_matching_on_product_list", {
          params: {
            id: this.info.id,
            image_number: this.matchedInfo.image_number,
            product_name: this.matchedInfo.product_name,
          },
        })
        .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;
        });
    },
    handleShowCurrencySheet(row, type) {
      if (row.isCurrenct) {
        row.isCurrenct = !row.isCurrenct;
      } else {
        this.unmatchedObj.urlList.map((v) => (v.isCurrenct = false));
        row.isCurrenct = true;
        this.matchedReopenTag = row.id;
      }
      this.getSheetDetailList(row, type);
    },
    handleHiddenSheetDetail(row) {
      if (row.isHidden) {
        row.isHidden = !row.isHidden;
      } else {
        row.isHidden = true;
      }
      this.matchedReopenList = [];
      this.unmatchedObj.part_list.map((v) => {
        if (v.isHidden) {
          this.matchedReopenList.push(
            v.key.list
              .map((w) => {
                return w.value;
              })
              .join("*")
          );
        }
      });
      console.log(`this.matchedReopenList`, this.matchedReopenList);
      this.$forceUpdate();
    },
    handleHiddenMatchedDetail(row) {
      if (row.isHidden) {
        row.isHidden = !row.isHidden;
      } else {
        row.isHidden = true;
      }
      this.$forceUpdate();
    },
    handleShowCurrencyMatched(row) {
      if (row.isCurrenct) {
        row.isCurrenct = !row.isCurrenct;
      } else {
        this.matchedList.map((v) => (v.isCurrenct = false));
        row.isCurrenct = true;
      }
      this.getMatchedDetailList(row);
    },
    getSheetDetailList(row, type) {
      switch (type) {
        case 1:
          row.isCurrenct &&
            this.axios
              .post("/api/bst_matching_un_product_detail", {
                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_size1: this.info.wool_size1,
                key: this.matchedReopenList,
              })
              .then((res) => {
                console.log(`123`, 123);
                this.unmatchedObj.part_list = [];
                this.unmatchedObj.part_list = res.data.part_list;
                this.unmatchedObj.part_list = res.data.part_list;
                this.unmatchedObj.part_list.forEach((v) => {
                  v.isHidden = true;
                });
                this.unmatchedRoomList.house_list = [];
                this.unmatchedRoomList.house_list = res.data.house_list;
                this.unmatchedRoomList.house_list.forEach((v) => {
                  this.unmatchedObj.part_list[0].key.list.forEach((item) => {
                    v[item.key] = item.value;
                  });
                });

                this.unmatchedRoomTableColumnsUsed = this.unmatchedRoomTableColumns.concat(
                  res.data.head_word.map((v) => {
                    return { title: v, align: "center", key: v, minWidth: 60 };
                  })
                );
                this.unmatchedRoomTableColumnsModal = this.unmatchedRoomTableColumnsUsed.concat(
                  {
                    title: "匹配数量",
                    align: "center",
                    minWidth: 60,
                    slot: "numSlot",
                  }
                );
                this.unmatchedRoomTableColumnsModal = this.unmatchedRoomTableColumnsModal.splice(
                  1
                );
                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_size1 = res.data.search_word.wool_size1;
                this.wool_size2 = res.data.search_word.wool_size2;
                this.unmatchedObj.part_list.map((v) => {
                  if (v.state == 1) {
                    v.isHidden = true;
                  }
                });
                this.$forceUpdate();
              });
          break;
        case 2:
          row.isCurrenct &&
            this.axios
              .post("/api/bst_matching_un_product_detail", {
                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_size2: this.info.wool_size2,
                key: this.matchedReopenList,
              })
              .then((res) => {
                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.unmatchedRoomTableColumnsModal = this.unmatchedRoomTableColumnsUsed.concat(
                  {
                    title: "匹配数量",
                    align: "center",
                    minWidth: 60,
                    slot: "numSlot",
                  }
                );
                this.unmatchedRoomTableColumnsModal = this.unmatchedRoomTableColumnsModal.splice(
                  1
                );
                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_size1 = res.data.search_word.wool_size1;
                this.wool_size2 = res.data.search_word.wool_size2;
                this.unmatchedObj.part_list.map((v) => {
                  if (v.state == 1) {
                    v.isHidden = true;
                  }
                });
                this.$forceUpdate();
              });
          break;
      }
    },
    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;
          });
    },
    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) {
          let data = [];
          res.data.list.map((v) => (v.isCurrenct = false));
          res.data.list.forEach((element) => {
            if (element.number != 0) {
              data.push(element);
            }
          });
          this.unmatchedObj.urlList = data;
          this.urlSelectList = res.data.image_number;
          this.productList = res.data.product_name;
          this.unmatchedSelectedList = [];
          this.unmatchedObj.urlList.map((v) => {
            if (v.id == this.matchedReopenTag) {
              v.isCurrenct = true;
              if (this.isClickMatch) {
                this.getSheetDetailList(v, 1);
              }
            }
          });
          this.$forceUpdate();
        }
      });
    },
    handleHandingMatchAVG() {
      let num = parseInt(
        this.currentChooseNumber / this.unmatchedSelectedList.length
      );
      this.unmatchedSelectedList.map((v) => {
        v.num = num;
      });
      this.unmatchedSelectedList = JSON.parse(
        JSON.stringify(this.unmatchedSelectedList)
      );
      this.handleHandingMatchNumChange();
    },
    handleIsAllowHandingMatch() {
      if (this.unmatchedSelectedList.length < 1 || !this.currentChooseNumber) {
        return this.$Message.warning("请选择");
      }
      if (this.currentChooseNumber < this.unmatchedSelectedList.length) {
        return this.$Message.warning("未匹配数量不足，请重新选择");
      }
      this.showHandingMatchModal = true;
    },
    handleHandingMatchNumChange() {
      let sum = 0;
      this.unmatchedSelectedList.map((v) => {
        sum += v.num * 1;
      });
      this.currentChooseNumberUsed = sum;
    },
    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();
          }
        });
    },
    handleHandingMatch() {
      const house = this.unmatchedSelectedList.map((v) => {
        return { cut_order_product_room_id: v.id, num: v.num };
      });
      this.axios
        .post("/api/bst_hand_matching", {
          cut_order_product_detail_id: this.currentChooseId,
          house,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg);
            this.showHandingMatchModal = false;
            this.currentChooseId = "";
            this.currentChooseNumber = 0;
            this.currentChooseNumberUsed = 0;
            this.currentChooseTitle = "";
            this.unmatchedSelectedList = [];
            this.isClickMatch = true;
            this.handleSearchUnmatchedInfo();
          }
        });
    },
    handleMatchedSelectAll() {
      this.isMatchedSelectAll = !this.isMatchedSelectAll;
      this.matchedList.map((v) => {
        if (v.produce_status == 0) {
          v.isSelect = this.isMatchedSelectAll;
          this.matchedSelectedList.push(v.id);
        }
      });
    },
    handleMatchedSelect(row, e) {
      row.isSelect = e;
      let flag = true;
      this.matchedSelectedList = [];
      this.matchedList.map((v) => {
        if (v.produce_status == 0) {
          if (v.isSelect) {
            this.matchedSelectedList.push(v.id);
          } else {
            flag = false;
          }
        }
      });
      this.isMatchedSelectAll = flag;
    },
    handleMatchedSet(row, index, type) {
      if (this.matchedSelectedList.length == 0) {
        return this.$Message.warning("请选择");
      }
      switch (type) {
        case 5:
          if (index == -1) {
            this.matchedSelectedList = [row.id];
          } else {
            this.matchedSelectedList = [];
            this.matchedList.map((v) => {
              v.isSelect && this.matchedSelectedList.push(v.id);
            });
          }
          this.axios
            .post("/api/bst_cancer_matching", {
              cut_order_product_id: this.matchedSelectedList,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.handleMatchedListInit();
                this.isMatchedSelectAll = false;
              }
            });
          break;
      }
    },
  },
  // 监听属性 类似于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: 80%;
  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;
}
.sheet-block,
.room-block {
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
</style>