小程序

Mr.Zhang

2023-09-04 0d9c19184e72995fd8f57266c1ac5cf7f875e30c

 h5_standard/src/views/needToBeDealtWith/exWarehouse.vue

@@ -1,185 +1,185 @@
<template>
    <div class="page">
        <!--    头部信息(转库单)    -->
        <div class="page_info" v-if="info.wtransfer && route.query.type == 7">
            <div class="page_info_title">计划出库日期：{{info.wtransfer.outPlandate}}</div>
            <div class="page_info_list">
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">来源类型：</div>
                    <div class="page_info_list_item_nr" v-if="info.wtransfer.originType === 0">采购订单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 1">生产工单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 2">销售订单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 3">转库单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 4">盘点单</div>
                    <div class="page_info_list_item_nr" v-else>-</div>
                </div>
<!--                <div class="page_info_list_item">-->
<!--                    <div class="page_info_list_item_label">申领工序：</div>-->
<!--                    <div class="page_info_list_item_nr">{{info.wtransfer.procedureName ? info.wtransfer.procedureName : '-'}}</div>-->
<!--                </div>-->
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">来源单号：</div>
                    <div class="page_info_list_item_nr">{{info.wtransfer.originCode ? info.wtransfer.originCode : '-'}}</div>
                </div>
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">申请人员：</div>
                    <div class="page_info_list_item_nr">{{info.wtransfer.outUserName}}/{{info.wtransfer.outDepartName}}</div>
                </div>
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">入库接收人：</div>
                    <div class="page_info_list_item_nr">{{info.wtransfer.inUserName}}</div>
                </div>
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">申请时间：</div>
                    <div class="page_info_list_item_nr">{{info.wtransfer.createTime ? info.wtransfer.createTime : '-'}}</div>
                </div>
            </div>
            <div class="page_info_bz" v-if="info.wtransfer.abstracts">
                <div class="page_info_bz_title">转库备注：</div>
                <div class="page_info_bz_nr">{{info.wtransfer.abstracts}}</div>
            </div>
  <div class="page">
    <!--    头部信息(转库单)    -->
    <div class="page_info" v-if="info.wtransfer && route.query.type == 7">
      <div class="page_info_title">计划出库日期：{{ info.wtransfer.outPlandate }}</div>
      <div class="page_info_list">
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">来源类型：</div>
          <div class="page_info_list_item_nr" v-if="info.wtransfer.originType === 0">采购订单</div>
          <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 1">生产工单</div>
          <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 2">销售订单</div>
          <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 3">转库单</div>
          <div class="page_info_list_item_nr" v-else-if="info.wtransfer.originType === 4">盘点单</div>
          <div class="page_info_list_item_nr" v-else>-</div>
        </div>
        <!--    头部信息(出库单)    -->
        <div class="page_info" v-if="info.woutbound && route.query.type == 8">
            <div class="page_info_title">计划出库日期：{{info.woutbound.planDate}}</div>
            <div class="page_info_list">
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">来源类型：</div>
                    <div class="page_info_list_item_nr" v-if="info.woutbound.originType === 0">采购订单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 1">生产工单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 2">销售订单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 3">转库单</div>
                    <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 4">盘点单</div>
                    <div class="page_info_list_item_nr" v-else>-</div>
                </div>
<!--                <div class="page_info_list_item">-->
<!--                    <div class="page_info_list_item_label">申领工序：</div>-->
<!--                    <div class="page_info_list_item_nr">{{info.woutbound.procedureName ? info.woutbound.procedureName : '-'}}</div>-->
<!--                </div>-->
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">来源单号：</div>
                    <div class="page_info_list_item_nr">{{info.woutbound.originCode ? info.woutbound.originCode : '-'}}</div>
                </div>
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">申请人员：</div>
                    <div class="page_info_list_item_nr">{{info.woutbound.userName}}/{{info.woutbound.userDepartName}}</div>
                </div>
                <div class="page_info_list_item">
                    <div class="page_info_list_item_label">申请时间：</div>
                    <div class="page_info_list_item_nr">{{info.woutbound.createTime ? info.woutbound.createTime : '-'}}</div>
                </div>
            </div>
            <div class="page_info_bz" v-if="info.woutbound.abstracts">
                <div class="page_info_bz_title">转库备注：</div>
                <div class="page_info_bz_nr">{{info.woutbound.abstracts}}</div>
            </div>
        <!--                <div class="page_info_list_item">-->
        <!--                    <div class="page_info_list_item_label">申领工序：</div>-->
        <!--                    <div class="page_info_list_item_nr">{{info.wtransfer.procedureName ? info.wtransfer.procedureName : '-'}}</div>-->
        <!--                </div>-->
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">来源单号：</div>
          <div class="page_info_list_item_nr">{{ info.wtransfer.originCode ? info.wtransfer.originCode : '-' }}</div>
        </div>
        <div class="page_h"></div>
        <!--    打开选择工装    -->
<!--        <div class="switch" v-if="type === QRCodeType.ZKD.toString()">-->
<!--            <button @click="openxz"><img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="">手动选择</button>-->
<!--        </div>-->
<!--        <div class="page_h" v-if="type === QRCodeType.ZKD.toString()"></div>-->
        <!--    待出物料    -->
        <van-collapse v-model="activeNames">
            <!--        转库单（多个仓库）        -->
            <template v-if="route.query.type == 7">
                <van-collapse-item :name="String(index + 1 )" v-for="(item, index) in info.wtransferWarehouseList" :key="index">
                    <template #title>
                        <div class="page_sfq"><img src="@/assets/icon/chuku_ic_cangku@2x.png" alt="" /> {{item.warehouseName}}</div>
                    </template>
                    <div class="page_dck">
                        <div class="page_dck_title">
                            <div class="page_dck_title_x"></div>
                            <span>待出库物料</span>
                        </div>
                    </div>
                    <div class="page_content" v-for="(items, idx) in item.wtransferDetailList" :key="idx">
                        <div class="page_content_title">
                            <div class="page_content_title_top">
                                <span>{{items.materialName}} | {{items.materialCode}}</span>
                                <span>待出 <span>{{items.outPlannum}}</span> {{items.unitName}}</span>
                            </div>
                            <div class="page_content_title_bottom">
                                <span class="green" v-if="items.qualityType === 0">合格 / </span>
                                <span class="warning" v-else-if="items.qualityType === 1">不良&nbsp;/&nbsp;</span>
                                <span class="error" v-else-if="items.qualityType === 2">报废 /&nbsp;</span>
                                <span v-else>-&nbsp;/&nbsp;</span>
                                <span>{{items.procedureName ? items.procedureName : '-'}}&nbsp;/&nbsp;</span>
                                <span>{{items.batch ? items.batch : '-'}}</span>
                            </div>
                        </div>
                        <div class="page_content_list" v-for="(childer, idxs) in items.wstockExtListVOList" :key="idxs">
                          <div class="page_content_list_item">
                            <div class="page_content_list_item_label">出库货位：</div>
                            <div class="page_content_list_item_nr">{{childer.locationName}}</div>
                          </div>
                          <div class="page_content_list_items">
                            <div class="page_content_list_item_label">数量：</div>
                            <div class="page_content_list_item_nr">{{childer.num}}{{childer.unitName}}</div>
                          </div>
                          <div class="page_content_list_item">
                            <div class="page_content_list_item_label">批次号：</div>
                            <div class="page_content_list_item_nr">{{childer.batch ? childer.batch : '-'}}</div>
                          </div>
                        </div>
                    </div>
                </van-collapse-item>
            </template>
            <!--        出库单（一个仓库）        -->
            <template v-if="route.query.type == 8">
                <van-collapse-item name="1">
                    <template #title>
                        <div class="page_sfq" v-if="info.woutbound">
                            <img src="@/assets/icon/chuku_ic_cangku@2x.png" alt="" /> {{info.woutbound.warehouseName}}
                        </div>
                    </template>
                    <div class="page_dck">
                        <div class="page_dck_title">
                            <div class="page_dck_title_x"></div>
                            <span>待出库物料</span>
                        </div>
                    </div>
                    <div class="page_content" v-for="(item, index) in info.woutboundDetailsWait" :key="index">
                        <div class="page_content_title">
<!--                            <span>{{item.materialName}} | {{item.materialCode}}</span>-->
<!--                            <span>待出 <span>{{item.num}}</span> {{item.unitName}}</span>-->
                            <div class="page_content_title_top">
                                <span>{{item.materialName}} | {{item.materialCode}}</span>
                                <span>待出 <span>{{item.num}}</span> {{item.unitName}}</span>
                            </div>
                            <div class="page_content_title_bottom">
                                <span class="green" v-if="item.qualityType === 0">合格&nbsp;/&nbsp;</span>
                                <span class="warning" v-else-if="item.qualityType === 1">不良&nbsp;/&nbsp;</span>
                                <span class="error" v-else-if="item.qualityType === 2">报废&nbsp;/&nbsp;</span>
                                <span v-else>-&nbsp;/&nbsp;</span>
                                <span>{{item.procedureName ? item.procedureName : '-'}}&nbsp;/&nbsp;</span>
                                <span>{{item.batch ? item.batch : '-'}}</span>
                            </div>
                        </div>
                        <div class="page_content_list" v-for="(items, ind) in item.wstockExtListVOList" :key="ind">
                            <div class="page_content_list_item">
                                <div class="page_content_list_item_label">批次号：</div>
                                <div class="page_content_list_item_nr">{{items.batch ? items.batch : '-'}}</div>
                            </div>
                            <div class="page_content_list_items">
                                <div class="page_content_list_item_label">数量：</div>
                                <div class="page_content_list_item_nr">{{items.num}}{{items.umodel.name}}</div>
                            </div>
                            <div class="page_content_list_item" v-if="items.lmodel">
                                <div class="page_content_list_item_label">出库货位：</div>
                                <div class="page_content_list_item_nr">{{items.lmodel.unionName}}</div>
                            </div>
                        </div>
                    </div>
                </van-collapse-item>
            </template>
        </van-collapse>
        <div class="page_h"></div>
        <!--    已选物料    -->
        <div class="page_yxwl">
            <!--        转库单（多个仓库）        -->
            <!-- <template v-if="route.query.type == 7">
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">申请人员：</div>
          <div class="page_info_list_item_nr">{{ info.wtransfer.outUserName }}/{{ info.wtransfer.outDepartName }}</div>
        </div>
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">入库接收人：</div>
          <div class="page_info_list_item_nr">{{ info.wtransfer.inUserName }}</div>
        </div>
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">申请时间：</div>
          <div class="page_info_list_item_nr">{{ info.wtransfer.createTime ? info.wtransfer.createTime : '-' }}</div>
        </div>
      </div>
      <div class="page_info_bz" v-if="info.wtransfer.abstracts">
        <div class="page_info_bz_title">转库备注：</div>
        <div class="page_info_bz_nr">{{ info.wtransfer.abstracts }}</div>
      </div>
    </div>
    <!--    头部信息(出库单)    -->
    <div class="page_info" v-if="info.woutbound && route.query.type == 8">
      <div class="page_info_title">计划出库日期：{{ info.woutbound.planDate }}</div>
      <div class="page_info_list">
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">来源类型：</div>
          <div class="page_info_list_item_nr" v-if="info.woutbound.originType === 0">采购订单</div>
          <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 1">生产工单</div>
          <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 2">销售订单</div>
          <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 3">转库单</div>
          <div class="page_info_list_item_nr" v-else-if="info.woutbound.originType === 4">盘点单</div>
          <div class="page_info_list_item_nr" v-else>-</div>
        </div>
        <!--                <div class="page_info_list_item">-->
        <!--                    <div class="page_info_list_item_label">申领工序：</div>-->
        <!--                    <div class="page_info_list_item_nr">{{info.woutbound.procedureName ? info.woutbound.procedureName : '-'}}</div>-->
        <!--                </div>-->
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">来源单号：</div>
          <div class="page_info_list_item_nr">{{ info.woutbound.originCode ? info.woutbound.originCode : '-' }}</div>
        </div>
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">申请人员：</div>
          <div class="page_info_list_item_nr">{{ info.woutbound.userName }}/{{ info.woutbound.userDepartName }}</div>
        </div>
        <div class="page_info_list_item">
          <div class="page_info_list_item_label">申请时间：</div>
          <div class="page_info_list_item_nr">{{ info.woutbound.createTime ? info.woutbound.createTime : '-' }}</div>
        </div>
      </div>
      <div class="page_info_bz" v-if="info.woutbound.abstracts">
        <div class="page_info_bz_title">转库备注：</div>
        <div class="page_info_bz_nr">{{ info.woutbound.abstracts }}</div>
      </div>
    </div>
    <div class="page_h"></div>
    <!--    打开选择工装    -->
    <!--        <div class="switch" v-if="type === QRCodeType.ZKD.toString()">-->
    <!--            <button @click="openxz"><img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="">手动选择</button>-->
    <!--        </div>-->
    <!--        <div class="page_h" v-if="type === QRCodeType.ZKD.toString()"></div>-->
    <!--    待出物料    -->
    <van-collapse v-model="activeNames">
      <!--        转库单（多个仓库）        -->
      <template v-if="route.query.type == 7">
        <van-collapse-item :name="String(index + 1)" v-for="(item, index) in info.wtransferWarehouseList" :key="index">
          <template #title>
            <div class="page_sfq"><img src="@/assets/icon/chuku_ic_cangku@2x.png" alt="" /> {{ item.warehouseName }}</div>
          </template>
          <div class="page_dck">
            <div class="page_dck_title">
              <div class="page_dck_title_x"></div>
              <span>待出库物料</span>
            </div>
          </div>
          <div class="page_content" v-for="(items, idx) in item.wtransferDetailList" :key="idx">
            <div class="page_content_title">
              <div class="page_content_title_top">
                <span>{{ items.materialName }} | {{ items.materialCode }}</span>
                <span>待出 <span>{{ items.outPlannum }}</span> {{ items.unitName }}</span>
              </div>
              <div class="page_content_title_bottom">
                <span class="green" v-if="items.qualityType === 0">合格 / </span>
                <span class="warning" v-else-if="items.qualityType === 1">不良&nbsp;/&nbsp;</span>
                <span class="error" v-else-if="items.qualityType === 2">报废 /&nbsp;</span>
                <span v-else>-&nbsp;/&nbsp;</span>
                <span>{{ items.procedureName ? items.procedureName : '-' }}&nbsp;/&nbsp;</span>
                <span>{{ items.batch ? items.batch : '-' }}</span>
              </div>
            </div>
            <div class="page_content_list" v-for="(childer, idxs) in items.wstockExtListVOList" :key="idxs">
              <div class="page_content_list_item">
                <div class="page_content_list_item_label">出库货位：</div>
                <div class="page_content_list_item_nr">{{ childer.locationName }}</div>
              </div>
              <div class="page_content_list_items">
                <div class="page_content_list_item_label">数量：</div>
                <div class="page_content_list_item_nr">{{ childer.num }}{{ childer.unitName }}</div>
              </div>
              <div class="page_content_list_item">
                <div class="page_content_list_item_label">批次号：</div>
                <div class="page_content_list_item_nr">{{ childer.batch ? childer.batch : '-' }}</div>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </template>
      <!--        出库单（一个仓库）        -->
      <template v-if="route.query.type == 8">
        <van-collapse-item name="1">
          <template #title>
            <div class="page_sfq" v-if="info.woutbound">
              <img src="@/assets/icon/chuku_ic_cangku@2x.png" alt="" /> {{ info.woutbound.warehouseName }}
            </div>
          </template>
          <div class="page_dck">
            <div class="page_dck_title">
              <div class="page_dck_title_x"></div>
              <span>待出库物料</span>
            </div>
          </div>
          <div class="page_content" v-for="(item, index) in info.woutboundDetailsWait" :key="index">
            <div class="page_content_title">
              <!--                            <span>{{item.materialName}} | {{item.materialCode}}</span>-->
              <!--                            <span>待出 <span>{{item.num}}</span> {{item.unitName}}</span>-->
              <div class="page_content_title_top">
                <span>{{ item.materialName }} | {{ item.materialCode }}</span>
                <span>待出 <span>{{ item.num }}</span> {{ item.unitName }}</span>
              </div>
              <div class="page_content_title_bottom">
                <span class="green" v-if="item.qualityType === 0">合格&nbsp;/&nbsp;</span>
                <span class="warning" v-else-if="item.qualityType === 1">不良&nbsp;/&nbsp;</span>
                <span class="error" v-else-if="item.qualityType === 2">报废&nbsp;/&nbsp;</span>
                <span v-else>-&nbsp;/&nbsp;</span>
                <span>{{ item.procedureName ? item.procedureName : '-' }}&nbsp;/&nbsp;</span>
                <span>{{ item.batch ? item.batch : '-' }}</span>
              </div>
            </div>
            <div class="page_content_list" v-for="(items, ind) in item.wstockExtListVOList" :key="ind">
              <div class="page_content_list_item">
                <div class="page_content_list_item_label">批次号：</div>
                <div class="page_content_list_item_nr">{{ items.batch ? items.batch : '-' }}</div>
              </div>
              <div class="page_content_list_items">
                <div class="page_content_list_item_label">数量：</div>
                <div class="page_content_list_item_nr">{{ items.num }}{{ items.umodel.name }}</div>
              </div>
              <div class="page_content_list_item" v-if="items.lmodel">
                <div class="page_content_list_item_label">出库货位：</div>
                <div class="page_content_list_item_nr">{{ items.lmodel.unionName }}</div>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </template>
    </van-collapse>
    <div class="page_h"></div>
    <!--    已选物料    -->
    <div class="page_yxwl">
      <!--        转库单（多个仓库）        -->
      <!-- <template v-if="route.query.type == 7">
                <div class="page_yxwl_title">
                    <div class="left">
                        <div class="page_yxwl_title_x"></div>
@@ -225,844 +225,917 @@
                </div>
                <div class="page_yxwl_kong" v-else><span>暂无数据</span></div>
            </template> -->
            <!--        出库单（一个仓库）        -->
            <!-- <template v-if="route.query.type == 8"> -->
                <div class="page_yxwl_title">
<!--                    <div class="page_yxwl_title_x"></div>-->
<!--                    <span>已选择物料</span>-->
                    <div class="left">
                        <div class="page_yxwl_title_x"></div>
                        <span>已选择物料</span>
                    </div>
                    <div class="right" @click="openxz">
                        <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt=""><span>手动出库</span>
                    </div>
                    <!-- <div></div> -->
                </div>
                <div class="page_yxwl_list" v-if="outboundList.length > 0">
                    <!-- <template> -->
                        <div class="page_yxwl_list_item" v-for="(item, index) in outboundList" :key="index">
                            <div class="page_yxwl_list_item_top">
                                <div class="page_yxwl_list_item_top_left">{{ item.materialName }} | {{ item.materialCode }} </div>
                                <!-- <div class="page_yxwl_list_item_top_right">
      <!--        出库单（一个仓库）        -->
      <!-- <template v-if="route.query.type == 8"> -->
      <div class="page_yxwl_title">
        <!--                    <div class="page_yxwl_title_x"></div>-->
        <!--                    <span>已选择物料</span>-->
        <div class="left">
          <div class="page_yxwl_title_x"></div>
          <span>已选择物料</span>
        </div>
        <div class="right" @click="openxz">
          <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt=""><span>手动出库</span>
        </div>
        <!-- <div></div> -->
      </div>
      <div class="page_yxwl_list" v-if="outboundList.length > 0">
        <!-- <template> -->
        <div class="page_yxwl_list_item" v-for="(item, index) in outboundList" :key="index">
          <div class="page_yxwl_list_item_top">
            <div class="page_yxwl_list_item_top_left">{{ item.materialName }} | {{ item.materialCode }} </div>
            <!-- <div class="page_yxwl_list_item_top_right">
                                    <span>已选：<span>{{item.outPlannum}}</span> {{item.unitName}}</span>
                                </div> -->
                            </div>
                            <div class="page_yxwl_list_item_sx">
                                <span class="green" v-if="item.qualityType == 0">合格&nbsp;<span>/</span></span>
                                <span class="yellow" v-else-if="item.qualityType == 1">不良&nbsp;<span>/</span></span>
                                <span class="red" v-else-if="item.qualityType == 2">报废&nbsp;<span>/</span></span>
                                <span v-else>-&nbsp;/&nbsp;</span>
                                <span>&nbsp;{{item.procedureName ? item.procedureName : '-'}}&nbsp;/&nbsp;</span>
                                <span>&nbsp;{{item.batch ? item.batch : '-'}}</span>
                            </div>
                            <div class="page_yxwl_list_item_num">
                                <div class="item">
                                    <div class="label">出库货位：</div>
                                    <div class="nr">
                                        <span>{{ item.locationName }}</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="label">数量：</div>
                                    <div class="nr">
                                        <!-- @input="changeNum(item)" -->
                                        <input type="number" v-model="item.num" placeholder="请输入">
                                        <span>{{ item.unitName }}</span>
                                    </div>
                                </div>
                                <div class="dele" @click="dele(index)">
                                    <img src="@/assets/icon/chuku_ic_delete@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                    <!-- </template> -->
                </div>
                <div class="page_yxwl_kong" v-else><span>暂无数据</span></div>
            <!-- </template> -->
          </div>
          <div class="page_yxwl_list_item_sx">
            <span class="green" v-if="item.qualityType == 0">合格&nbsp;<span>/</span></span>
            <span class="yellow" v-else-if="item.qualityType == 1">不良&nbsp;<span>/</span></span>
            <span class="red" v-else-if="item.qualityType == 2">报废&nbsp;<span>/</span></span>
            <span v-else>-&nbsp;/&nbsp;</span>
            <span>&nbsp;{{ item.procedureName ? item.procedureName : '-' }}&nbsp;/&nbsp;</span>
            <span>&nbsp;{{ item.batch ? item.batch : '-' }}</span>
          </div>
          <div class="page_yxwl_list_item_num">
            <div class="item">
              <div class="label">出库货位：</div>
              <div class="nr">
                <span>{{ item.locationName }}</span>
              </div>
            </div>
            <div class="item">
              <div class="label">数量：</div>
              <div class="nr">
                <!-- @input="changeNum(item)" -->
                <input type="number" v-model="item.num" placeholder="请输入">
                <span>{{ item.unitName }}</span>
              </div>
            </div>
            <div class="dele" @click="dele(index)">
              <img src="@/assets/icon/chuku_ic_delete@2x.png" alt="" />
            </div>
          </div>
        </div>
        <div class="page_zw"></div>
        <!--    操作按钮    -->
        <div class="page_footer">
            <button class="page_footer_qrck" v-preventReClick @click="submit">
                <span>确认出库</span>
            </button>
        </div>
        <Access :show="show" :transferId="(route.query.id as string)" :warehouseId="warehouseId" @close="closeBox" @value="getValue" />
        <!-- </template> -->
      </div>
      <div class="page_yxwl_kong" v-else><span>暂无数据</span></div>
      <!-- </template> -->
    </div>
    <div class="page_zw"></div>
    <!--    操作按钮    -->
    <div class="page_footer">
      <button class="page_footer_qrck" v-preventReClick @click="submit">
        <span>确认出库</span>
      </button>
    </div>
    <Access :show="show" :transferId="(route.query.id as string)" :warehouseId="warehouseId" @close="closeBox"
      @value="getValue" />
  </div>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute, useRouter } from "vue-router"
    import { Toast } from 'vant'
    import { QRCodeType } from '@/enum'
    import {
        outScanAppliances,
        wTransferForInOut,
        wTransferForInOutUpload,
        wOutBoundForInOut,
        wOutBoundForUpload,
        transferToOutNew
    } from '@/apis/ExWarehouse'
    import { useStore } from 'vuex'
    import { getDB } from '@/apis/agencyAPI'
    import Access from '@/components/common/Access.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from "vue-router"
import { Toast } from 'vant'
import { QRCodeType } from '@/enum'
import {
  outScanAppliances,
  wTransferForInOut,
  wTransferForInOutUpload,
  wOutBoundForInOut,
  wOutBoundForUpload,
  transferToOutNew
} from '@/apis/ExWarehouse'
import { useStore } from 'vuex'
import { getDB } from '@/apis/agencyAPI'
import Access from '@/components/common/Access.vue'

    const route = useRoute()
    const store = useStore()
    const router = useRouter()
const route = useRoute()
const store = useStore()
const router = useRouter()

    let dataItem: any = null    // 已扫数据
let dataItem: any = null    // 已扫数据

    let show = ref<boolean>(false)
    let ids = ref<string>('')   // 已选
    let warehouseId = ref('')  // 仓库id
    let outboundList = ref<any[]>([])  // 出库数据
    // 控制扫码显示隐藏
    const openCode = ref<boolean>(false)
let show = ref<boolean>(false)
let ids = ref<string>('')   // 已选
let warehouseId = ref('')  // 仓库id
let outboundList = ref<any[]>([])  // 出库数据
// 控制扫码显示隐藏
const openCode = ref<boolean>(false)

    // 出库类型
    let type: any = route.query.type
// 出库类型
let type: any = route.query.type

    const activeNames = ref(['1']);
const activeNames = ref(['1']);

    // 详情数据
    let info: any = ref({})
// 详情数据
let info: any = ref({})

    // 打开手动选择工装弹框
    const openxz = () => {
        let arr: any = []
        if (info.value.wtransferRedisCodeBeanList.length !== 0) {
            info.value.wtransferRedisCodeBeanList.forEach((element: any) => {
                arr.push(element.appliancesId)
            })
            ids.value = arr.join(',')
        } else {
            ids.value = ''
        }
        show.value = true
    }

    const closeBox = () => {
        show.value = false
    }

    const changeNum = (item: any) => {
        info.value.wtransferWarehouseList[0].wtransferDetailList.forEach((row: any) => {
            if (row.materialId === item.materialId) {
                if (Number(item.num) > Number(row.outPlannum)) {
                    item.num = 0
                    Toast.fail({ message: "出库物料数量不能大于待出库物料数量" })
                }
            }
        })
    }

    // 提交工装
    const getValue = async (val: any, i: number) => {
        // if (i === 0) {
        show.value = false
        // }
        

        for (let i = 0; i < info.value.wtransferWarehouseList[0].wtransferDetailList.length; i++) {
            if (info.value.wtransferWarehouseList[0].wtransferDetailList[i].materialId == val.materialId &&
            info.value.wtransferWarehouseList[0].wtransferDetailList[i].procedureId == val.procedureId &&
            info.value.wtransferWarehouseList[0].wtransferDetailList[i].qualityType == val.qualityType &&
            info.value.wtransferWarehouseList[0].wtransferDetailList[i].batch == val.batch) {

                for (let s = 0; s < outboundList.value.length; s++) {
                    if (outboundList.value[s].newId == info.value.wtransferWarehouseList[0].wtransferDetailList[i].id) {
                        return Toast.fail({ message: "该物料批次已存在" })
                    }
                }

                let obj = JSON.parse(JSON.stringify(val))
                obj.newId = info.value.wtransferWarehouseList[0].wtransferDetailList[i].id
                outboundList.value.push(obj)

            }
        }

        console.log(outboundList.value)
        // let res = await outScanAppliances({
        //     barCode: val.prefix + val.code,
        //     pId: info.value.wtransfer.id,
        //     type: 1
        // })
        // if (res.code === 200) {
        //     let isData: string = ''
        //     info.value.wtransferWarehouseList.forEach((item: any) => {
        //         if (res.data.warehouseId === item.warehouseId) {
        //             item.wtransferDetailList.forEach((item1: any) => {
        //                 if (item1.materialId !== res.data.materialId) {
        //                     isData = 'wl'
        //                 } else if (res.data.qualityType !== item1.qualityType) {
        //                     isData = 'lx'
        //                 } else if (res.data.procedureId !== item1.procedureId) {
        //                     isData = 'gx'
        //                 } else if (item1.batch ? res.data.batch !== item1.batch : false) {
        //                     isData = 'pc'
        //                 } else {
        //                     isData = ''
        //                 }
        //                 if (item1.materialId == res.data.materialId && res.data.qualityType == item1.qualityType && res.data.procedureId == item1.procedureId && item1.batch ? res.data.batch == item1.batch : true) {
        //                     dataItem = res.data
        //                     dataItem.wtransferDetailId = item1.id
        //                     dataItem.wtransferId = item1.transferId
        //                     dataItem.appliancesId = res.data.id
        //                     let rul = upload()
        //                     return;
        //                 }
        //             })
        //         } else {
        //             isData = 'ck'
        //         }
        //         if (isData === 'ck') {
        //             Toast.fail({ message: "仓库不一致" })
        //         } else if (isData === 'wl') {
        //             Toast.fail({ message: "物料不一致" })
        //         } else if (isData === 'lx') {
        //             Toast.fail({ message: "质量类型不一致" })
        //         } else if (isData === 'gx') {
        //             Toast.fail({ message: "工序不一致" })
        //         } else if (isData === 'pc') {
        //             Toast.fail({ message: "批次不一致" })
        //         }
        //     })
        // }
        // show.value = false
    }

    // 获取详情 (转库单/出库单)
    const getInfo = () => {
        let type: string = route.query.type as string
        if (type === QRCodeType.CKD.toString()) {
            console.log('出库单')
            wOutBoundForInOut({
                id: Number(route.query.id),
                wOutboundType: 0
            }).then(res => {
                if (res.code === 200) {
                    info.value = res.data
                    warehouseId.value = info.value.wtransferWarehouseList[0].warehouseId.toString()
                } else {
                    Toast.fail({ message: res.message, forbidClick: true, duration: 2000 })
                    setTimeout(() => {
                        router.go(-1)
                    }, 2000)
                }
            })
        } else if (type === QRCodeType.ZKD.toString()) {
            console.log('转库单')
            wTransferForInOut({
                id: Number(route.query.id),
                wTransferType: 0
            }).then(res => {
                if (res.code === 200) {
                    info.value = res.data
                    warehouseId.value = info.value.wtransferWarehouseList[0].warehouseId.toString()
                } else {
                    Toast.fail({ message: res.message, forbidClick: true, duration: 2000 })
                    setTimeout(() => {
                        router.go(-1)
                    }, 2000)
                }
            })
        }
    }

    // 删除对应的批次
    const dele = (index: Number) => {
        outboundList.value.forEach((item: any, i: number) => {
            if (index === i) {
                outboundList.value.splice(i, 1)
            }
        })
    }

    // 上传工装
    const upload = () => {
        if (type === QRCodeType.ZKD.toString()) {
            wTransferForInOut({
                id: Number(route.query.id),
                optType: 1,
                wTransferType: 0,
                jsonBean: dataItem
            }).then(res => {
                if (res.code === 200) {
                    getInfo()
                }
            })
        } else if (type === QRCodeType.CKD.toString()) {
            wOutBoundForInOut({
                id: Number(route.query.id),
                optType: 1,
                wOutboundType: 0,
                jsonBean: dataItem
            }).then(res => {
                if (res.code === 200) {
                    getInfo()
                }
            })
        }
    }

    // 点击扫码出库
    const ck = () => {
        openCode.value = true
    }

    // 提交操作
    const submit = () => {
        if (type === QRCodeType.ZKD.toString()) {
            if (outboundList.value.length > 0) {
                let result = outboundList.value.reduce((a, b) => {
                    if (a[b.newId]) {
                        a[b.newId].push(b);
                    } else {
                        a[b.newId] = [b];
                    }
                    return a;
                }, {});

                for (let i = 0; i < info.value.wtransferWarehouseList[0].wtransferDetailList.length; i++) {
                    for (let a in result) {
                        if (info.value.wtransferWarehouseList[0].wtransferDetailList[i].id == a) {
                            let total = 0
                            for (let b = 0; b < result[a].length; b++) {
                                total = Number(total) + Number(result[a][b].num)
                            }
                            console.log(total, info.value.wtransferWarehouseList[0].wtransferDetailList[i].outPlannum)
                            if (!total || total <= 0) {
                                return Toast.fail({ message: '出库物料数量必须大于0', forbidClick: true, duration: 2000 })
                            }
                            if (total > info.value.wtransferWarehouseList[0].wtransferDetailList[i].outPlannum) {
                                return Toast.fail({ message: '出库数量不能大于待出库数量', forbidClick: true, duration: 2000 })
                            }
                        }
                    }
                }

                let submitTransferOutDetailDTOList: any = []
                outboundList.value.forEach((item: any) => {
                    info.value.wtransferWarehouseList[0].wtransferDetailList.forEach((child: any) => {
                        if (item.newId == child.id) {
                            submitTransferOutDetailDTOList.push({
                                outNum: item.num,
                                wstockId: item.id,
                                wtransferDetailId: child.id
                            })
                        }
                    })
                })
                transferToOutNew({
                    submitTransferOutDetailDTOList,
                    wtransferId: route.query.id
                }).then(res => {
                    if (res.code === 200) {
                        store.dispatch('getUpcomingNum')
                        Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
                        setTimeout(() => {
                            router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
                        }, 2000)
                    }
                })
            } else {
                Toast.fail({ message: '请选择出库物料', forbidClick: true, duration: 2000 })
            }
            // let yx: number = 0
            // let dc: number = 0
            // info.value.wtransferRedisCodeBeanList.forEach((element: any) => {
            //     yx = yx + element.num
            // })
            // info.value.wtransferWarehouseList.forEach((element: any) => {
            //     element.wtransferDetailList.forEach((elementChilder: any) => {
            //         dc = dc + elementChilder.outPlannum
            //     })
            // })
            // if (yx < dc) {
            //     Dialog.confirm({
            //         title: '提示',
            //         message: '待出物料与已出物料数量不一致，是否确认出库',
            //     })
            //     .then(() => {
            //         wTransferForInOutUpload({
            //             id: info.value.wtransfer.id,
            //             wTransferType: 0
            //         }).then(res => {
            //             if (res.code === 200) {
            //                 store.dispatch('getUpcomingNum')
            //                 Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
            //                 setTimeout(() => {
            //                     // router.go(-1)
            //                     router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
            //                 }, 2000)
            //             }
            //         })
            //         return
            //     })
            //     .catch(() => {

            //     });
            // } else {
            //     wTransferForInOutUpload({
            //         id: info.value.wtransfer.id,
            //         wTransferType: 0
            //     }).then(res => {
            //         if (res.code === 200) {
            //             store.dispatch('getUpcomingNum')
            //             Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
            //             setTimeout(() => {
            //                 // router.go(-1)
            //                 router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
            //             }, 2000)
            //         }
            //     })
            // }
        } else if (type === QRCodeType.CKD.toString()) {
            wOutBoundForUpload({
                id: info.value.woutbound.id,
                wOutboundType: 0
            }).then(res => {
                if (res.code === 200) {
                    store.dispatch('getUpcomingNum')
                    Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
                    setTimeout(() => {
                        // router.go(-1)
                        router.replace({ name: 'wOutboundDetail', query: { id: info.value.wtransfer.id } })
                    }, 2000)
                }
            })
        }
    }

    // 获取待办详情(判断当前待办是否已处理)
    const getDBs = async (id: string): Promise<any> => {
        let res = await getDB(id)
        if (res.code === 200) {
            if (res.data.status === 1) {
                if (type === QRCodeType.CKD.toString()) {
                    await router.replace({ name: 'wOutboundDetail', query: { id: route.query.id } })
                } else if (type === QRCodeType.ZKD.toString()) {
                    await router.replace({ name: 'wTransferDetail', query: { id: route.query.id } })
                }
            } else {
                await getInfo()
            }
        }
    }

    onMounted(() => {
        if (route.query.dbid) {
            getDBs(route.query.dbid as string)
        } else {
            getInfo()
        }
// 打开手动选择工装弹框
const openxz = () => {
  let arr: any = []
  if (info.value.wtransferRedisCodeBeanList.length !== 0) {
    info.value.wtransferRedisCodeBeanList.forEach((element: any) => {
      arr.push(element.appliancesId)
    })
    ids.value = arr.join(',')
  } else {
    ids.value = ''
  }
  show.value = true
}

const closeBox = () => {
  show.value = false
}

const changeNum = (item: any) => {
  info.value.wtransferWarehouseList[0].wtransferDetailList.forEach((row: any) => {
    if (row.materialId === item.materialId) {
      if (Number(item.num) > Number(row.outPlannum)) {
        item.num = 0
        Toast.fail({ message: "出库物料数量不能大于待出库物料数量" })
      }
    }
  })
}

// 提交工装
const getValue = async (val: any, i: number) => {
  // if (i === 0) {
  show.value = false
  // }


  for (let i = 0; i < info.value.wtransferWarehouseList[0].wtransferDetailList.length; i++) {
    if (info.value.wtransferWarehouseList[0].wtransferDetailList[i].materialId == val.materialId &&
      info.value.wtransferWarehouseList[0].wtransferDetailList[i].procedureId == val.procedureId &&
      info.value.wtransferWarehouseList[0].wtransferDetailList[i].qualityType == val.qualityType &&
      info.value.wtransferWarehouseList[0].wtransferDetailList[i].batch == val.batch) {

      for (let s = 0; s < outboundList.value.length; s++) {
        if (outboundList.value[s].newId == info.value.wtransferWarehouseList[0].wtransferDetailList[i].id) {
          return Toast.fail({ message: "该物料批次已存在" })
        }
      }

      let obj = JSON.parse(JSON.stringify(val))
      obj.newId = info.value.wtransferWarehouseList[0].wtransferDetailList[i].id
      outboundList.value.push(obj)

    }
  }

  console.log(outboundList.value)
  // let res = await outScanAppliances({
  //     barCode: val.prefix + val.code,
  //     pId: info.value.wtransfer.id,
  //     type: 1
  // })
  // if (res.code === 200) {
  //     let isData: string = ''
  //     info.value.wtransferWarehouseList.forEach((item: any) => {
  //         if (res.data.warehouseId === item.warehouseId) {
  //             item.wtransferDetailList.forEach((item1: any) => {
  //                 if (item1.materialId !== res.data.materialId) {
  //                     isData = 'wl'
  //                 } else if (res.data.qualityType !== item1.qualityType) {
  //                     isData = 'lx'
  //                 } else if (res.data.procedureId !== item1.procedureId) {
  //                     isData = 'gx'
  //                 } else if (item1.batch ? res.data.batch !== item1.batch : false) {
  //                     isData = 'pc'
  //                 } else {
  //                     isData = ''
  //                 }
  //                 if (item1.materialId == res.data.materialId && res.data.qualityType == item1.qualityType && res.data.procedureId == item1.procedureId && item1.batch ? res.data.batch == item1.batch : true) {
  //                     dataItem = res.data
  //                     dataItem.wtransferDetailId = item1.id
  //                     dataItem.wtransferId = item1.transferId
  //                     dataItem.appliancesId = res.data.id
  //                     let rul = upload()
  //                     return;
  //                 }
  //             })
  //         } else {
  //             isData = 'ck'
  //         }
  //         if (isData === 'ck') {
  //             Toast.fail({ message: "仓库不一致" })
  //         } else if (isData === 'wl') {
  //             Toast.fail({ message: "物料不一致" })
  //         } else if (isData === 'lx') {
  //             Toast.fail({ message: "质量类型不一致" })
  //         } else if (isData === 'gx') {
  //             Toast.fail({ message: "工序不一致" })
  //         } else if (isData === 'pc') {
  //             Toast.fail({ message: "批次不一致" })
  //         }
  //     })
  // }
  // show.value = false
}

// 获取详情 (转库单/出库单)
const getInfo = () => {
  let type: string = route.query.type as string
  if (type === QRCodeType.CKD.toString()) {
    console.log('出库单')
    wOutBoundForInOut({
      id: Number(route.query.id),
      wOutboundType: 0
    }).then(res => {
      if (res.code === 200) {
        info.value = res.data
        warehouseId.value = info.value.wtransferWarehouseList[0].warehouseId.toString()
      } else {
        Toast.fail({ message: res.message, forbidClick: true, duration: 2000 })
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }
    })
  } else if (type === QRCodeType.ZKD.toString()) {
    console.log('转库单')
    wTransferForInOut({
      id: Number(route.query.id),
      wTransferType: 0
    }).then(res => {
      if (res.code === 200) {
        info.value = res.data
        warehouseId.value = info.value.wtransferWarehouseList[0].warehouseId.toString()
      } else {
        Toast.fail({ message: res.message, forbidClick: true, duration: 2000 })
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }
    })
  }
}

// 删除对应的批次
const dele = (index: Number) => {
  outboundList.value.forEach((item: any, i: number) => {
    if (index === i) {
      outboundList.value.splice(i, 1)
    }
  })
}

// 上传工装
const upload = () => {
  if (type === QRCodeType.ZKD.toString()) {
    wTransferForInOut({
      id: Number(route.query.id),
      optType: 1,
      wTransferType: 0,
      jsonBean: dataItem
    }).then(res => {
      if (res.code === 200) {
        getInfo()
      }
    })
  } else if (type === QRCodeType.CKD.toString()) {
    wOutBoundForInOut({
      id: Number(route.query.id),
      optType: 1,
      wOutboundType: 0,
      jsonBean: dataItem
    }).then(res => {
      if (res.code === 200) {
        getInfo()
      }
    })
  }
}

// 点击扫码出库
const ck = () => {
  openCode.value = true
}

// 提交操作
const submit = () => {
  if (type === QRCodeType.ZKD.toString()) {
    if (outboundList.value.length > 0) {
      let result = outboundList.value.reduce((a, b) => {
        if (a[b.newId]) {
          a[b.newId].push(b);
        } else {
          a[b.newId] = [b];
        }
        return a;
      }, {});

      for (let i = 0; i < info.value.wtransferWarehouseList[0].wtransferDetailList.length; i++) {
        for (let a in result) {
          if (info.value.wtransferWarehouseList[0].wtransferDetailList[i].id == a) {
            let total = 0
            for (let b = 0; b < result[a].length; b++) {
              total = Number(total) + Number(result[a][b].num)
            }
            console.log(total, info.value.wtransferWarehouseList[0].wtransferDetailList[i].outPlannum)
            if (!total || total <= 0) {
              return Toast.fail({ message: '出库物料数量必须大于0', forbidClick: true, duration: 2000 })
            }
            if (total > info.value.wtransferWarehouseList[0].wtransferDetailList[i].outPlannum) {
              return Toast.fail({ message: '出库数量不能大于待出库数量', forbidClick: true, duration: 2000 })
            }
          }
        }
      }

      let submitTransferOutDetailDTOList: any = []
      outboundList.value.forEach((item: any) => {
        info.value.wtransferWarehouseList[0].wtransferDetailList.forEach((child: any) => {
          if (item.newId == child.id) {
            submitTransferOutDetailDTOList.push({
              outNum: item.num,
              wstockId: item.id,
              wtransferDetailId: child.id
            })
          }
        })
      })
      transferToOutNew({
        submitTransferOutDetailDTOList,
        wtransferId: route.query.id
      }).then(res => {
        if (res.code === 200) {
          store.dispatch('getUpcomingNum')
          Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
          setTimeout(() => {
            router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
          }, 2000)
        }
      })
    } else {
      Toast.fail({ message: '请选择出库物料', forbidClick: true, duration: 2000 })
    }
    // let yx: number = 0
    // let dc: number = 0
    // info.value.wtransferRedisCodeBeanList.forEach((element: any) => {
    //     yx = yx + element.num
    // })
    // info.value.wtransferWarehouseList.forEach((element: any) => {
    //     element.wtransferDetailList.forEach((elementChilder: any) => {
    //         dc = dc + elementChilder.outPlannum
    //     })
    // })
    // if (yx < dc) {
    //     Dialog.confirm({
    //         title: '提示',
    //         message: '待出物料与已出物料数量不一致，是否确认出库',
    //     })
    //     .then(() => {
    //         wTransferForInOutUpload({
    //             id: info.value.wtransfer.id,
    //             wTransferType: 0
    //         }).then(res => {
    //             if (res.code === 200) {
    //                 store.dispatch('getUpcomingNum')
    //                 Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
    //                 setTimeout(() => {
    //                     // router.go(-1)
    //                     router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
    //                 }, 2000)
    //             }
    //         })
    //         return
    //     })
    //     .catch(() => {

    //     });
    // } else {
    //     wTransferForInOutUpload({
    //         id: info.value.wtransfer.id,
    //         wTransferType: 0
    //     }).then(res => {
    //         if (res.code === 200) {
    //             store.dispatch('getUpcomingNum')
    //             Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
    //             setTimeout(() => {
    //                 // router.go(-1)
    //                 router.replace({ name: 'wTransferDetail', query: { id: info.value.wtransfer.id, dbid: route.query.dbid } })
    //             }, 2000)
    //         }
    //     })
    // }
  } else if (type === QRCodeType.CKD.toString()) {
    wOutBoundForUpload({
      id: info.value.woutbound.id,
      wOutboundType: 0
    }).then(res => {
      if (res.code === 200) {
        store.dispatch('getUpcomingNum')
        Toast.success({ message: '操作成功', forbidClick: true, duration: 2000 })
        setTimeout(() => {
          // router.go(-1)
          router.replace({ name: 'wOutboundDetail', query: { id: info.value.wtransfer.id } })
        }, 2000)
      }
    })
  }
}

// 获取待办详情(判断当前待办是否已处理)
const getDBs = async (id: string): Promise<any> => {
  let res = await getDB(id)
  if (res.code === 200) {
    if (res.data.status === 1) {
      if (type === QRCodeType.CKD.toString()) {
        await router.replace({ name: 'wOutboundDetail', query: { id: route.query.id } })
      } else if (type === QRCodeType.ZKD.toString()) {
        await router.replace({ name: 'wTransferDetail', query: { id: route.query.id } })
      }
    } else {
      await getInfo()
    }
  }
}

onMounted(() => {
  if (route.query.dbid) {
    getDBs(route.query.dbid as string)
  } else {
    getInfo()
  }
})
</script>

<style lang="scss" scoped>
    .page {
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #F7F7F7;

  .page_info {
    padding: 30px;
    background: #ffffff;

    .page_info_title {
      font-size: 32px;
      font-weight: 500;
      color: #4275FC;
    }

    .page_info_list {
      display: flex;
      flex-wrap: wrap;
      margin: 30px 0 0 0;

      .page_info_list_item {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #F7F7F7;
        .page_info {
            padding: 30px;
            background: #ffffff;
            .page_info_title {
                font-size: 32px;
                font-weight: 500;
                color: #4275FC;
            }
            .page_info_list {
                display: flex;
                flex-wrap: wrap;
                margin: 30px 0 0 0;
                .page_info_list_item {
                    width: 100%;
                    display: flex;
                    margin-top: 24px;
                    &:nth-child(1) {
                        margin-top: 0;
                    }
                    /*&:nth-child(2) {*/
                    /*    margin-top: 0;*/
                    /*}*/
                    .page_info_list_item_label {
                        flex-shrink: 0;
                        font-size: 26px;
                        font-weight: 400;
                        color: #666666;
                    }
                    .page_info_list_item_nr {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 400;
                        color: #222222;
                    }
                }
            }
            .page_info_bz {
                padding: 24px;
                background: #F7F7F7;
                margin-top: 30px;
                .page_info_bz_title {
                    font-size: 26px;
                    font-weight: 500;
                    color: #222222;
                    margin-bottom: 20px;
                }
                .page_info_bz_nr {
                    font-size: 24px;
                    font-weight: 400;
                    color: #333333;
                }
            }
        display: flex;
        margin-top: 24px;

        &:nth-child(1) {
          margin-top: 0;
        }
        .switch {
            padding: 0 30px;
            button {
                width: 100%;
                border: none;
                height: 76px;
                background: #ffffff;
                border-radius: 36px;
                font-size: 26px;
                font-weight: 400;
                color: black;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-right: 14px;
                }
            }

        /*&:nth-child(2) {*/
        /*    margin-top: 0;*/
        /*}*/
        .page_info_list_item_label {
          flex-shrink: 0;
          font-size: 26px;
          font-weight: 400;
          color: #666666;
        }
        .page_h {
            height: 20px;

        .page_info_list_item_nr {
          flex: 1;
          font-size: 26px;
          font-weight: 400;
          color: #222222;
        }
        .page_sfq {
            font-size: 32px;
      }
    }

    .page_info_bz {
      padding: 24px;
      background: #F7F7F7;
      margin-top: 30px;

      .page_info_bz_title {
        font-size: 26px;
        font-weight: 500;
        color: #222222;
        margin-bottom: 20px;
      }

      .page_info_bz_nr {
        font-size: 24px;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .switch {
    padding: 0 30px;

    button {
      width: 100%;
      border: none;
      height: 76px;
      background: #ffffff;
      border-radius: 36px;
      font-size: 26px;
      font-weight: 400;
      color: black;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 28px;
        height: 28px;
        margin-right: 14px;
      }
    }
  }

  .page_h {
    height: 20px;
  }

  .page_sfq {
    font-size: 32px;
    font-weight: 500;
    color: #222222;
    display: flex;
    align-items: center;

    img {
      width: 36px;
      height: 36px;
      margin-right: 16px;
    }
  }

  .page_dck {
    .page_dck_title {
      display: flex;
      align-items: center;

      .page_dck_title_x {
        width: 8px;
        height: 30px;
        background: #4275FC;
        border-radius: 2px;
        margin-right: 16px;
      }

      span {
        font-size: 32px;
        font-weight: 500;
        color: #222222;
      }
    }
  }

  .page_content {
    margin-top: 28px;

    .page_content_title {
      display: flex;
      flex-direction: column;

      .page_content_title_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          &:nth-child(1) {
            font-size: 30px;
            font-weight: 500;
            color: #222222;
            display: flex;
            align-items: center;
            img {
                width: 36px;
                height: 36px;
                margin-right: 16px;
          }

          &:nth-child(2) {
            flex-shrink: 0;
            font-size: 24px;
            font-weight: 400;
            color: #333333;

            span {
              font-size: 24px;
              color: $nav-color;
            }
          }
        }
        .page_dck {
            .page_dck_title {
                display: flex;
                align-items: center;
                .page_dck_title_x {
                    width: 8px;
                    height: 30px;
                    background: #4275FC;
                    border-radius: 2px;
                    margin-right: 16px;
                }
                span {
                    font-size: 32px;
                    font-weight: 500;
                    color: #222222;
                }
            }
      }

      .page_content_title_bottom {
        .green {
          color: $nav-stateColor7 !important;
        }
        .page_content {
            margin-top: 28px;
            .page_content_title {
                display: flex;
                flex-direction: column;
                .page_content_title_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span {
                        &:nth-child(1) {
                            font-size: 30px;
                            font-weight: 500;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            flex-shrink: 0;
                            font-size: 24px;
                            font-weight: 400;
                            color: #333333;
                            span {
                                font-size: 24px;
                                color: $nav-color;
                            }
                        }
                    }
                }
                .page_content_title_bottom {
                    .green {
                        color: $nav-stateColor7 !important;
                    }
                    .warning {
                        color: $nav-stateColor5 !important;
                    }
                    .error {
                        color: $nav-stateColor4 !important;
                    }
                    span {
                        font-size: 24px;
                        font-weight: 400;
                        color: #666666;
                    }
                }
            }
            .page_content_list {
                width: 100%;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                padding-bottom: 30px;
                margin-top: 28px;
                border-bottom: 1px solid #E5E5E5;
                &:first-child {
                    margin: 0;
                }
                &:last-child {
                    border: none;
                }
                .page_content_list_items {
                    width: 30%;
                    display: flex;
                    margin-top: 24px;
                    .page_content_list_item_label {
                        font-size: 26px;
                        font-weight: 400;
                        color: #666666;
                        flex-shrink: 0;
                    }
                    .page_content_list_item_nr {
                        font-size: 26px;
                        font-weight: 400;
                        color: #222222;
                    }
                }
                .page_content_list_item {
                    width: 70%;
                    display: flex;
                    .page_content_list_item_label {
                        font-size: 26px;
                        font-weight: 400;
                        color: #666666;
                        flex-shrink: 0;
                    }
                    .page_content_list_item_nr {
                        font-size: 26px;
                        font-weight: 400;
                        color: #222222;
                    }
                }
            }

        .warning {
          color: $nav-stateColor5 !important;
        }
        .page_yxwl {
            padding: 30px;
            background: #ffffff;
            .page_yxwl_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .page_yxwl_title_x {
                    width: 8px;
                    height: 30px;
                    background: #4275FC;
                    border-radius: 2px;
                    margin-right: 16px;
                }
                span {
                    font-size: 32px;
                    font-weight: 500;
                    color: #222222;
                }
                .left {
                    display: flex;
                    align-items: center;
                    .page_yxwl_title_x {
                        width: 8px;
                        height: 30px;
                        background: #4275FC;
                        border-radius: 2px;
                        margin-right: 16px;
                    }
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                }
                .right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 14px;
                    }
                    span {
                        font-size: 26px;
                        font-weight: 400;
                        color: #222222;
                    }
                }
            }
            .page_yxwl_kong {
                padding: 50px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    font-size: 25px;
                    color: black;
                }
            }
            .page_yxwl_list {
                display: flex;
                flex-direction: column;
                padding-bottom: 30px;
                border-bottom: 1px solid #ececec;
                &:last-child {
                    margin-bottom: 0;
                    border: none;
                }
                .page_yxwl_list_item {
                    margin-top: 28px;
                    .page_yxwl_list_item_sx {
                        margin-top: 10px;
                        span {
                            color: black;
                        }
                    }
                    .page_yxwl_list_item_top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .page_yxwl_list_item_top_left {
                            font-size: 30px;
                            font-weight: 500;
                            color: #222222;
                        }
                        .page_yxwl_list_item_top_right {
                            span {
                                font-size: 24px;
                                font-weight: 400;
                                color: #333333;
                                span {
                                    font-size: 24px;
                                    font-weight: 400;
                                    color: $nav-color;
                                }
                            }
                        }
                    }
                    .page_yxwl_list_item_num {
                        display: flex;
                        position: relative;
                        margin-top: 36px;
                        &:first-child {
                            margin-top: 0;
                        }
                        .dele {
                            position: absolute;
                            right: -30px;
                            width: 48px;
                            height: 48px;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .item {
                            width: 50%;
                            display: flex;
                            align-items: center;
                            .label {
                                flex-shrink: 0;
                                font-size: 26px;
                                font-weight: 400;
                                color: #666666;
                                flex-shrink: 0;
                            }
                            .nr {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                input {
                                    width: 130px;
                                    height: 40px;
                                    border-radius: 8px;
                                    border: 1PX solid #E5E5E5;
                                    margin-right: 10px;
                                }
                                span {
                                    font-size: 26px;
                                    font-weight: 400;
                                    color: #222222;
                                }
                            }
                        }
                    }
                }
            }

        .error {
          color: $nav-stateColor4 !important;
        }
        .page_zw {
            height: 160px;

        span {
          font-size: 24px;
          font-weight: 400;
          color: #666666;
        }
        .page_footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 30px 68px 30px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .page_footer_smck {
                width: 334px;
                height: 88px;
                border: none;
                background: #FFFFFF;
                box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
                border-radius: 8px;
                font-size: 32px;
                font-weight: 500;
                color: $nav-color;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 30px;
                    height: 30px;
                    margin-right: 10px;
                }
            }
            .page_footer_qrck {
                // width: 334px;
                flex: 1;
                height: 88px;
                border: none;
                background: $nav-color;
                box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
                border-radius: 8px;
                font-size: 32px;
                font-weight: 500;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
      }
    }
</style>

    .page_content_list {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 30px;
      margin-top: 28px;
      border-bottom: 1px solid #E5E5E5;

      &:first-child {
        margin: 0;
      }

      &:last-child {
        border: none;
      }

      .page_content_list_items {
        width: 30%;
        display: flex;
        margin-top: 24px;

        .page_content_list_item_label {
          font-size: 26px;
          font-weight: 400;
          color: #666666;
          flex-shrink: 0;
        }

        .page_content_list_item_nr {
          font-size: 26px;
          font-weight: 400;
          color: #222222;
        }
      }

      .page_content_list_item {
        width: 70%;
        display: flex;

        .page_content_list_item_label {
          font-size: 26px;
          font-weight: 400;
          color: #666666;
          flex-shrink: 0;
        }

        .page_content_list_item_nr {
          font-size: 26px;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }

  .page_yxwl {
    padding: 30px;
    background: #ffffff;

    .page_yxwl_title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .page_yxwl_title_x {
        width: 8px;
        height: 30px;
        background: #4275FC;
        border-radius: 2px;
        margin-right: 16px;
      }

      span {
        font-size: 32px;
        font-weight: 500;
        color: #222222;
      }

      .left {
        display: flex;
        align-items: center;

        .page_yxwl_title_x {
          width: 8px;
          height: 30px;
          background: #4275FC;
          border-radius: 2px;
          margin-right: 16px;
        }

        span {
          font-size: 32px;
          font-weight: 500;
          color: #222222;
        }
      }

      .right {
        display: flex;
        align-items: center;

        img {
          width: 28px;
          height: 28px;
          margin-right: 14px;
        }

        span {
          font-size: 26px;
          font-weight: 400;
          color: #222222;
        }
      }
    }

    .page_yxwl_kong {
      padding: 50px 0;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 25px;
        color: black;
      }
    }

    .page_yxwl_list {
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;
      border-bottom: 1px solid #ececec;

      &:last-child {
        margin-bottom: 0;
        border: none;
      }

      .page_yxwl_list_item {
        margin-top: 28px;

        .page_yxwl_list_item_sx {
          margin-top: 10px;

          span {
            color: black;
          }
        }

        .page_yxwl_list_item_top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .page_yxwl_list_item_top_left {
            font-size: 30px;
            font-weight: 500;
            color: #222222;
          }

          .page_yxwl_list_item_top_right {
            span {
              font-size: 24px;
              font-weight: 400;
              color: #333333;

              span {
                font-size: 24px;
                font-weight: 400;
                color: $nav-color;
              }
            }
          }
        }

        .page_yxwl_list_item_num {
          display: flex;
          position: relative;
          margin-top: 36px;

          &:first-child {
            margin-top: 0;
          }

          .dele {
            position: absolute;
            right: -30px;
            width: 48px;
            height: 48px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .item {
            width: 50%;
            display: flex;
            align-items: center;

            .label {
              flex-shrink: 0;
              font-size: 26px;
              font-weight: 400;
              color: #666666;
              flex-shrink: 0;
            }

            .nr {
              flex: 1;
              display: flex;
              align-items: center;

              input {
                width: 130px;
                height: 40px;
                border-radius: 8px;
                border: 1PX solid #E5E5E5;
                margin-right: 10px;
              }

              span {
                font-size: 26px;
                font-weight: 400;
                color: #222222;
              }
            }
          }
        }
      }
    }
  }

  .page_zw {
    height: 160px;
  }

  .page_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 30px 68px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .page_footer_smck {
      width: 334px;
      height: 88px;
      border: none;
      background: #FFFFFF;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      font-size: 32px;
      font-weight: 500;
      color: $nav-color;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }

    .page_footer_qrck {
      // width: 334px;
      flex: 1;
      height: 88px;
      border: none;
      background: $nav-color;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      font-size: 32px;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}</style>