web_dist/src/views/yp-codg/YpCodgUpload.vue

<template>
  <div class="layout_container">
    <header>
      <el-input
        v-model.trim="keyCode"
        class="w-50 m-2"
        style="width: 220px"
        placeholder="请输入批次号或者门诊号"
        clearable
      >
        <template #prepend>单号</template>
      </el-input>
      <el-input
          v-model.trim="setlId"
          class="w-50 m-2"
          style="width: 200px; margin-left: 3px"
          placeholder="请输入结算ID"
          clearable
      >
        <template #prepend>结算ID</template>
      </el-input>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        :clearable="false"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        style="width: 270px; margin-left: 3px"
      ></el-date-picker>
      <el-select
        v-model="opFlag"
        placeholder="请选择库存变更类型"
        style="width: 140px; margin-left: 3px"
        @change="queryItem"
      >
        <el-option
          v-for="item in kcList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="ztFlag"
        placeholder="请选择销售类型"
        style="width: 140px; margin-left: 3px"
        @change="queryItem"
      >
        <el-option
          v-for="item in soldOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="uploadGroupNoYk"
        placeholder="请选择药库"
        style="width: 140px; margin-left: 3px"
        @change="queryItem"
      >
        <el-option
          v-for="item in groupNoYkData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="uploadGroupNoYf"
        placeholder="请选择药房"
        style="width: 140px; margin-left: 3px"
        @change="queryItem"
      >
        <el-option
          v-for="item in groupNoYfData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="retFlag"
        placeholder="请选择上传状态"
        style="width: 140px; margin-left: 3px"
      >
        <el-option
          v-for="item in retOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-divider direction="vertical" />
      <el-button
        type="primary"
        icon="Search"
        @click="queryItem"
        style="margin-left: 5px"
        >查询
      </el-button>
      <el-button
        type="primary"
        icon="Upload"
        @click="uploadYpGoods"
        style="margin-left: 5px"
        v-show="
          editableTabsValue === 'ypInvinfo' ||
          editableTabsValue === 'ypPurchase' ||
          editableTabsValue === 'ypSelinfo'
        "
        >批量上传
      </el-button>
      <el-button
        type="primary"
        icon="Delete"
        @click="deleteYpGoods"
        style="margin-left: 5px"
        v-show="
          editableTabsValue === 'ypInvinfoCx' ||
          editableTabsValue === 'ypPurchaseCx' ||
          editableTabsValue === 'ypSelinfoCx'
        "
        >批量删除
      </el-button>
    </header>
    <div class="layout_main">
      <el-tabs
        class="el-tabs__fill"
        v-model="editableTabsValue"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane key="ypInvinfo" label="药品库存变更" name="ypInvinfo">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypInvinfoData.slice(
                    pageSizeInvinfo * (currentPageInvinfo - 1),
                    pageSizeInvinfo * currentPageInvinfo
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handleInvinfoSelectionChange"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="medListCodg"
                  label="药品国家医保编码"
                  width="220"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="chargeCode"
                  label="药品编码"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                ></el-table-column>
                <el-table-column
                  prop="invChgType"
                  label="库存变更类型"
                  width="100"
                />
                <el-table-column
                  prop="invChgTypeName"
                  label="库存变更类型名称"
                  width="120"
                />
                <el-table-column
                  prop="fixmedinsBchno"
                  label="批次流水号"
                  width="110"
                ></el-table-column>
                <el-table-column prop="pric" label="单价" width="100" />
                <el-table-column prop="cnt" label="数量" width="100" />
                <el-table-column prop="rxFlag" label="处方药标志" width="100" />
                <el-table-column prop="trdnFlag" label="拆零标志" width="100" />
                <el-table-column
                  prop="invChgTime"
                  label="库存变更时间"
                  width="130"
                />
                <el-table-column
                  prop="invChgOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="120"
                  show-overflow-tooltip
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="80"
                  width="80"
                  center
                >
                  <template #default="scope">
                    <el-button
                      type="primary"
                      size="small"
                      @click="uploadYpInvinfoSingle(scope.row)"
                      >上传
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPageInvinfo"
                :page-size="pageSizeInvinfo"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypInvinfoData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangeInvinfo"
                @current-change="handleCurrentChangeInvinfo"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          key="ypInvinfoCx"
          label="药品库存变更上传查询"
          name="ypInvinfoCx"
        >
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypInvinfoUploadData.slice(
                    pageSizeInvinfoCx * (currentPageInvinfoCx - 1),
                    pageSizeInvinfoCx * currentPageInvinfoCx
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handleInvinfoSelectionChangeCx"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column prop="uploadFlag" label="状态" width="80">
                  <template #default="scope">
                    <span v-if="scope.row.uploadFlag === '1'">已上传</span>
                    <span v-else-if="scope.row.uploadFlag === '0'"
                      >上传失败</span
                    >
                    <span v-else-if="scope.row.uploadFlag === '-2'"
                      >已删除</span
                    >
                    <span v-else>{{ scope.row.uploadFlag }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="msgErr" label="上传信息" width="100">
                  <template #default="scope">
                    <span v-if="scope.row.msgErr">
                      <el-popover
                        effect="light"
                        trigger="click"
                        placement="top-start"
                        width="left"
                      >
                        <template #default>
                          <div>
                            <span style="color: red">上传信息:</span>
                            {{ scope.row.msgErr }}
                          </div>
                        </template>
                        <template #reference>
                          <el-tag>{{ scope.row.msgErr }}</el-tag>
                        </template>
                      </el-popover>
                    </span>
                    <span v-else>{{ scope.row.msgErr }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="medListCodg"
                  label="药品国家医保编码"
                  width="220"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="chargeCode"
                  label="药品编码"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                ></el-table-column>
                <el-table-column
                  prop="invChgType"
                  label="库存变更类型"
                  width="100"
                />
                <el-table-column
                  prop="invChgTypeName"
                  label="库存变更类型名称"
                  width="120"
                />
                <el-table-column
                  prop="fixmedinsBchno"
                  label="批次流水号"
                  width="110"
                ></el-table-column>
                <el-table-column prop="pric" label="单价" width="100" />
                <el-table-column prop="cnt" label="数量" width="100" />
                <el-table-column prop="rxFlag" label="处方药标志" width="100" />
                <el-table-column prop="trdnFlag" label="拆零标志" width="100" />
                <el-table-column
                  prop="invChgTime"
                  label="库存变更时间"
                  width="130"
                />
                <el-table-column
                  prop="invChgOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="120"
                  show-overflow-tooltip
                />
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPageInvinfoCx"
                :page-size="pageSizeInvinfoCx"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypInvinfoUploadData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangeInvinfoCx"
                @current-change="handleCurrentChangeInvinfoCx"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          key="ypPurchase"
          label="药品入库/退货上传"
          name="ypPurchase"
          v-if="false"
        >
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypPurchaseData.slice(
                    pageSizePurchase * (currentPagePurchase - 1),
                    pageSizePurchase * currentPagePurchase
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handlePurchaseSelectionChange"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="medListCodg"
                  label="药品编码"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                ></el-table-column>
                <el-table-column
                  prop="fixmedinsBchno"
                  label="入/退库单号"
                  width="110"
                ></el-table-column>
                <el-table-column
                  prop="splerName"
                  label="供应商名称"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="manuLotnum"
                  label="生产批号"
                  width="100"
                />
                <el-table-column
                  prop="prodentpName"
                  label="生产厂家名称"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column prop="aprvno" label="批准文号" width="130" />
                <el-table-column prop="manuDate" label="生产日期" width="100" />
                <el-table-column prop="expyEnd" label="有效期止" width="100" />
                <el-table-column
                  prop="finlTrnsPric"
                  label="最终成交单价"
                  width="100"
                />
                <el-table-column
                  prop="purcRetnCnt"
                  label="采购/退货数量"
                  width="100"
                />
                <el-table-column
                  prop="purcInvoNo"
                  label="采购/退货发票号"
                  width="100"
                />
                <el-table-column prop="rxFlag" label="处方药标志" width="100" />
                <el-table-column
                  prop="purcRetnStoinTime"
                  label="入/退库时间"
                  width="130"
                />
                <el-table-column
                  prop="purcRetnOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="100"
                  show-overflow-tooltip
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="180"
                  width="180"
                  center
                >
                  <template #default="scope">
                    <el-button
                      type="primary"
                      size="small"
                      @click="uploadYpPurchaseSingle(scope.row)"
                      >上传
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      @click="callYpInvoice(scope.row)"
                      >更新发票号
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPagePurchase"
                :page-size="pageSizePurchase"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypPurchaseData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangePurchase"
                @current-change="handleCurrentChangePurchase"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="ypSelinfo" label="药品销售/退货上传" name="ypSelinfo">
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypSelinfoData.slice(
                    pageSizeSelinfo * (currentPageSelinfo - 1),
                    pageSizeSelinfo * currentPageSelinfo
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handleSelinfoSelectionChange"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="medListCodg"
                  label="药品国家医保编码"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="chargeCode"
                  label="药品编码"
                  width="80"
                />
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                />
                <el-table-column
                  prop="fixmedinsBchno"
                  label="销售/退货单号"
                  width="135"
                />
                <el-table-column
                  prop="prscDrName"
                  label="开方医师姓名"
                  width="100"
                />
                <el-table-column prop="pharName" label="药师姓名" width="100" />
                <el-table-column
                  prop="pharPracCertNo"
                  label="药师执业资格证号"
                  width="120"
                />
                <el-table-column prop="setlId" label="结算ID" width="100" />
                <el-table-column
                  prop="mdtrtSetlType"
                  label="结算方式"
                  width="100"
                >
                  <template #header>
                    <span>结算方式</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />1 表示医保结算；2 表示自费结算。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="mdtrtSn"
                  label="就医流水号"
                  width="100"
                />
                <el-table-column
                  prop="manuLotnum"
                  label="生产批号"
                  width="120"
                />
                <el-table-column prop="manuDate" label="生产日期" width="100" />
                <el-table-column prop="expyEnd" label="有效期止" width="100" />
                <el-table-column prop="rxFlag" label="处方药标志" width="100">
                  <template #header>
                    <span>处方药标志</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />0 表示非处方药；1 表示处方药。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="trdnFlag" label="拆零标志" width="100">
                  <template #header>
                    <span>拆零标志</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />0 表示否；1 表示是。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="finlTrnsPric"
                  label="最终成交单价"
                  width="100"
                />
                <el-table-column
                  prop="rtalDocno"
                  label="零售单据号"
                  width="120"
                />
                <el-table-column
                  prop="drugTracCodg"
                  label="药品追溯码"
                  width="145"
                />
                <el-table-column
                  prop="drugProdBarc"
                  label="药品条形码"
                  width="120"
                />
                <el-table-column
                  prop="selRetnCnt"
                  label="销售/退货数量"
                  width="100"
                />
                <el-table-column
                  prop="selRetnTime"
                  label="销售/退货时间"
                  width="145"
                />
                <el-table-column
                  prop="selRetnOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="100"
                  show-overflow-tooltip
                />
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPageSelinfo"
                :page-size="pageSizeSelinfo"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypSelinfoData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangeSelinfo"
                @current-change="handleCurrentChangeSelinfo"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          key="ypPurchaseCx"
          label="药品入库/退货上传查询"
          name="ypPurchaseCx"
          v-if="false"
        >
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypPurchaseUploadData.slice(
                    pageSizePurchaseCx * (currentPagePurchaseCx - 1),
                    pageSizePurchaseCx * currentPagePurchaseCx
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handlePurchaseSelectionChangeCx"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column prop="uploadFlag" label="状态" width="80">
                  <template #default="scope">
                    <span v-if="scope.row.uploadFlag === '1'">已上传</span>
                    <span v-else-if="scope.row.uploadFlag === '0'"
                      >上传失败</span
                    >
                    <span v-else>{{ scope.row.uploadFlag }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="msgErr" label="上传信息" width="100">
                  <template #default="scope">
                    <span v-if="scope.row.msgErr">
                      <el-popover
                        effect="light"
                        trigger="click"
                        placement="top-start"
                        width="left"
                      >
                        <template #default>
                          <div>
                            <span style="color: red">上传信息:</span>
                            {{ scope.row.msgErr }}
                          </div>
                        </template>
                        <template #reference>
                          <el-tag>{{ scope.row.msgErr }}</el-tag>
                        </template>
                      </el-popover>
                    </span>
                    <span v-else>{{ scope.row.msgErr }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="medListCodg"
                  label="药品编码"
                  width="80"
                />
                <el-table-column
                  prop="chargeCode"
                  label="药品编码"
                  width="80"
                />
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                ></el-table-column>
                <el-table-column
                  prop="fixmedinsBchno"
                  label="入/退库单号"
                  width="110"
                ></el-table-column>
                <el-table-column
                  prop="splerName"
                  label="供应商名称"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="manuLotnum"
                  label="生产批号"
                  width="100"
                />
                <el-table-column
                  prop="prodentpName"
                  label="生产厂家名称"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column prop="aprvno" label="批准文号" width="130" />
                <el-table-column prop="manuDate" label="生产日期" width="100" />
                <el-table-column prop="expyEnd" label="有效期止" width="100" />
                <el-table-column
                  prop="finlTrnsPric"
                  label="最终成交单价"
                  width="100"
                />
                <el-table-column
                  prop="purcRetnCnt"
                  label="采购/退货数量"
                  width="100"
                />
                <el-table-column
                  prop="purcInvoNo"
                  label="采购/退货发票号"
                  width="100"
                />
                <el-table-column prop="rxFlag" label="处方药标志" width="100" />
                <el-table-column
                  prop="purcRetnStoinTime"
                  label="入/退库时间"
                  width="135"
                />
                <el-table-column
                  prop="purcRetnOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="100"
                  show-overflow-tooltip
                />
                <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="180"
                  width="180"
                  center
                >
                  <template #default="scope">
                    <el-button
                      type="primary"
                      size="small"
                      v-if="scope.row.uploadFlag === '-1'"
                      @click="uploadYpPurchaseSingle(scope.row)"
                      >重传
                    </el-button>
                    <el-button
                      type="primary"
                      size="small"
                      @click="callYpInvoice(scope.row)"
                      >更新发票号
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPagePurchaseCx"
                :page-size="pageSizePurchaseCx"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypPurchaseUploadData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangePurchaseCx"
                @current-change="handleCurrentChangePurchaseCx"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          key="ypSelinfoCx"
          label="药品销售/退货上传查询"
          name="ypSelinfoCx"
        >
          <div class="layout_display_flex_y">
            <div class="layout_flex_1-y">
              <el-table
                :data="
                  ypSelinfoUploadData.slice(
                    pageSizeSelinfoCx * (currentPageSelinfoCx - 1),
                    pageSizeSelinfoCx * currentPageSelinfoCx
                  )
                "
                border
                style="width: 100%"
                height="100%"
                stripe
                highlight-current-row
                @selection-change="handleSelinfoSelectionChangeCx"
                class="normal-size"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column
                  prop="fixmedinsHilistId"
                  label="id"
                  width="100"
                  v-if="false"
                />
                <el-table-column
                  prop="fixmedinsHilistName"
                  label="name"
                  width="100"
                  v-if="false"
                />
                <el-table-column prop="uploadFlag" label="状态" width="80">
                  <template #default="scope">
                    <span v-if="scope.row.uploadFlag === '1'">已上传</span>
                    <span v-else-if="scope.row.uploadFlag === '0'"
                      >上传失败</span
                    >
                    <span v-else>{{ scope.row.uploadFlag }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="msgErr" label="上传信息" width="160">
                  <template #default="scope">
                    <span v-if="scope.row.msgErr">
                      <el-popover
                        effect="light"
                        trigger="click"
                        placement="top-start"
                        width="left"
                      >
                        <template #default>
                          <div>
                            <span style="color: red">上传信息:</span>
                            {{ scope.row.msgErr }}
                          </div>
                        </template>
                        <template #reference>
                          <el-tag>{{ scope.row.msgErr }}</el-tag>
                        </template>
                      </el-popover>
                    </span>
                    <span v-else>{{ scope.row.msgErr }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="medListCodg"
                  label="药品国家医保编码"
                  width="200"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="chargeCode"
                  label="药品编码"
                  width="80"
                />
                <el-table-column
                  prop="chargeName"
                  label="药品名称"
                  width="240"
                />
                <el-table-column
                  prop="fixmedinsBchno"
                  label="销售/退货单号"
                  width="135"
                />
                <el-table-column
                  prop="prscDrName"
                  label="开方医师姓名"
                  width="100"
                />
                <el-table-column prop="pharName" label="药师姓名" width="100" />
                <el-table-column
                  prop="pharPracCertNo"
                  label="药师执业资格证号"
                  width="120"
                />
                <el-table-column prop="setlId" label="结算ID" width="100" />
                <el-table-column
                  prop="mdtrtSetlType"
                  label="结算方式"
                  width="100"
                >
                  <template #header>
                    <span>结算方式</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />1 表示医保结算；2 表示自费结算。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="mdtrtSn"
                  label="就医流水号"
                  width="100"
                />
                <el-table-column
                  prop="manuLotnum"
                  label="生产批号"
                  width="120"
                />
                <el-table-column prop="manuDate" label="生产日期" width="100" />
                <el-table-column prop="expyEnd" label="有效期止" width="100" />
                <el-table-column prop="rxFlag" label="处方药标志" width="100">
                  <template #header>
                    <span>处方药标志</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />0 表示非处方药；1 表示处方药。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="trdnFlag" label="拆零标志" width="100">
                  <template #header>
                    <span>拆零标志</span>
                    <el-tooltip class="box-item" effect="dark" placement="top">
                      <template #content
                        >注：<br />0 表示否；1 表示是。</template
                      >
                      <el-icon color="red" size="14"
                        ><QuestionFilled
                      /></el-icon>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="finlTrnsPric"
                  label="最终成交单价"
                  width="100"
                />
                <el-table-column
                  prop="rtalDocno"
                  label="零售单据号"
                  width="120"
                />
                <el-table-column
                  prop="drugTracCodg"
                  label="药品追溯码"
                  width="145"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="drugProdBarc"
                  label="药品条形码"
                  width="120"
                />
                <el-table-column
                  prop="selRetnCnt"
                  label="销售/退货数量"
                  width="100"
                />
                <el-table-column
                  prop="selRetnTime"
                  label="销售/退货时间"
                  width="145"
                />
                <el-table-column
                  prop="selRetnOpterName"
                  label="经办人姓名"
                  width="100"
                />
                <el-table-column prop="patNo" label="门诊号" width="100" />
                <el-table-column prop="times" label="门诊次数" width="80" />
                <el-table-column
                  prop="createTime"
                  label="销售/退货上传时间"
                  width="145"
                />
                <el-table-column
                  prop="memo"
                  label="备注"
                  width="100"
                  show-overflow-tooltip
                />
              </el-table>
            </div>
            <div>
              <el-pagination
                :current-page="currentPageSelinfoCx"
                :page-size="pageSizeSelinfoCx"
                :page-sizes="[10, 15, 20, 25]"
                :total="ypSelinfoUploadData.length"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 5px"
                @size-change="handleSizeChangeSelinfoCx"
                @current-change="handleCurrentChangeSelinfoCx"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="更新发票号" width="500">
    <el-form :model="formData">
      <el-input v-model="formData.serial" v-show="false" />
      <el-form-item label="单号" :label-width="formLabelWidth">
        <el-input v-model="formData.inDocuNo" disabled />
      </el-form-item>
      <el-form-item label="序号" :label-width="formLabelWidth">
        <el-input v-model="formData.inSeri" disabled />
      </el-form-item>
      <el-form-item label="药品编码" :label-width="formLabelWidth">
        <el-input v-model="formData.medListCodg" disabled />
      </el-form-item>
      <el-form-item label="药品名称" :label-width="formLabelWidth">
        <el-input v-model="formData.chargeName" disabled />
      </el-form-item>
      <el-form-item label="发票号" :label-width="formLabelWidth">
        <el-input v-model.trim="formData.purcInvoNo" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateYpInvoice">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="YpCodgUpload">
import { nextTick, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  deleteYpUploadBatch,
  saveYpInvoice,
  selectYpInvinfoDetail,
  selectYpInvinfoResult,
  selectYpPurchaseDetail,
  selectYpPurchaseResult,
  selectYpSelinfoDetail,
  selectYpSelinfoResult,
  uploadYpInvinfoBatch,
  uploadYpPurchaseBatch,
  uploadYpPurchaseReturnBatch,
  uploadYpSelinfoBatch,
  uploadYpSelinfoReturnBatch,
} from "@/api/yp-codg/yp-codg-upload";
import { shortcuts } from "@/data/shortcuts.js";
import {
  formatDate,
  getDateRangeFormatDate,
  subtractTime,
} from "@/utils/date.js";
import { QuestionFilled } from "@element-plus/icons-vue";
import { useYfGroupStore } from "@/pinia/use-yf-group";
import { selectGroupNoInfo } from "@/api/yp-dict/yp-comm-dict.js";

const kcList = ref([]);
const retOptions = [
  { value: "", label: "全部" },
  { value: "1", label: "上传成功" },
  { value: "0", label: "上传失败" },
];
const editableTabsValue = ref("ypInvinfo");
const start = formatDate(shortcuts[0].value[0]);
const end = formatDate(shortcuts[0].value[0]);
const dateRange = ref([]);
const soldOptions = [
  { value: "3", label: "销售" },
  { value: "4", label: "销售退货" },
];
const queryData = ref({
  startTime: "",
  endTime: "",
  docuNo: "",
  patNo: "",
  setlId: "",
  chargeCode: "",
  invChgType: "",
  groupNo: "",
  type: "",
  uploadFlag: "",
});

const pageSizeInvinfo = ref(20);
const currentPageInvinfo = ref(1);
const handleSizeChangeInvinfo = val => {
  pageSizeInvinfo.value = val;
};
const handleCurrentChangeInvinfo = val => {
  currentPageInvinfo.value = val;
};

const pageSizeInvinfoCx = ref(20);
const currentPageInvinfoCx = ref(1);
const handleSizeChangeInvinfoCx = val => {
  pageSizeInvinfoCx.value = val;
};
const handleCurrentChangeInvinfoCx = val => {
  currentPageInvinfoCx.value = val;
};

const pageSizePurchase = ref(20);
const currentPagePurchase = ref(1);
const handleSizeChangePurchase = val => {
  pageSizePurchase.value = val;
};
const handleCurrentChangePurchase = val => {
  currentPagePurchase.value = val;
};

const pageSizeSelinfo = ref(20);
const currentPageSelinfo = ref(1);
const handleSizeChangeSelinfo = val => {
  pageSizeSelinfo.value = val;
};
const handleCurrentChangeSelinfo = val => {
  currentPageSelinfo.value = val;
};

const pageSizePurchaseCx = ref(20);
const currentPagePurchaseCx = ref(1);
const handleSizeChangePurchaseCx = val => {
  pageSizePurchaseCx.value = val;
};
const handleCurrentChangePurchaseCx = val => {
  currentPagePurchaseCx.value = val;
};

const pageSizeSelinfoCx = ref(20);
const currentPageSelinfoCx = ref(1);
const handleSizeChangeSelinfoCx = val => {
  pageSizeSelinfoCx.value = val;
};
const handleCurrentChangeSelinfoCx = val => {
  currentPageSelinfoCx.value = val;
};

const ypInvinfoData = ref([]);
const ypInvinfoUploadData = ref([]);
const ypPurchaseData = ref([]);
const ypPurchaseUploadData = ref([]);
const ypSelinfoData = ref([]);
const ypSelinfoUploadData = ref([]);

const selectInvinfoDataList = ref([]);
const handleInvinfoSelectionChange = data => {
  selectInvinfoDataList.value = data;
};
const selectInvinfoDataListCx = ref([]);
const handleInvinfoSelectionChangeCx = data => {
  selectInvinfoDataListCx.value = data;
};
const selectPurchaseDataList = ref([]);
const handlePurchaseSelectionChange = data => {
  selectPurchaseDataList.value = data;
};
const selectPurchaseDataListCx = ref([]);
const handlePurchaseSelectionChangeCx = data => {
  selectPurchaseDataListCx.value = data;
};
const selectSelinfoDataList = ref([]);
const handleSelinfoSelectionChange = data => {
  selectSelinfoDataList.value = data;
};
const selectSelinfoDataListCx = ref([]);
const handleSelinfoSelectionChangeCx = data => {
  selectSelinfoDataListCx.value = data;
};

const keyCode = ref("");
const setlId = ref('')
const ztFlag = ref("3");
const retFlag = ref("");
const opFlag = ref("108");
const uploadGroupNoYk = ref("11");
const uploadGroupNoYf = ref(useYfGroupStore().getDefaultXyCode);
const groupNoYfData = ref([]);
const groupNoYkData = ref([]);
onMounted(() => {
  nextTick(() => {
    queryData.value.startTime = start;
    queryData.value.endTime = end + " 23:59:59";
    dateRange.value = [start, end];
    queryGroupNoInfo();
    queryCodgInvinfoUpload();
  });
});

const queryGroupNoInfo = () => {
  selectGroupNoInfo()
    .then(res => {
      groupNoYfData.value = res.yfList;
      groupNoYkData.value = res.ykList;
      kcList.value = res.kcList;
    })
    .catch(() => {
      groupNoYfData.value = [];
      groupNoYkData.value = [];
      kcList.value = [];
    });
};

// 查询药品库存变更待上传信息
const queryCodgInvinfoUpload = () => {
  selectInvinfoDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.docuNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYk.value;
  queryData.value.invChgType = opFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpInvinfoDetail(queryData.value)
    .then(res => {
      ypInvinfoData.value = res;
    })
    .catch(() => {
      ypInvinfoData.value = [];
    });
};

// 查询药品库存变更上传结果信息
const queryCodgInvinfoUploadResult = () => {
  selectPurchaseDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.docuNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYk.value;
  queryData.value.invChgType = opFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpInvinfoResult(queryData.value)
    .then(res => {
      ypInvinfoUploadData.value = res;
    })
    .catch(() => {
      ypInvinfoUploadData.value = [];
    });
};

// 查询药品入库/退货待上传信息
const queryCodgPurchaseUpload = () => {
  selectPurchaseDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.docuNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYk.value;
  queryData.value.type = ztFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpPurchaseDetail(queryData.value)
    .then(res => {
      ypPurchaseData.value = res;
    })
    .catch(() => {
      ypPurchaseData.value = [];
    });
};

// 查询药品销售/退货待上传信息
const queryCodgSelinfoUpload = () => {
  selectSelinfoDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    let days = subtractTime(dateS.endTime, dateS.startTime);
    if (days > 1) {
      ElMessage({
        type: "info",
        message: "查询药品销售数据请不要超过2天！",
        duration: 2500,
        showClose: true,
      });
      return false;
    }
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.patNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYf.value;
  queryData.value.setlId = setlId.value;
  queryData.value.type = ztFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpSelinfoDetail(queryData.value)
    .then(res => {
      ypSelinfoData.value = res;
    })
    .catch(() => {
      ypSelinfoData.value = [];
    });
};

// 查询药品入库/退货上传结果信息
const queryCodgPurchaseUploadResult = () => {
  selectPurchaseDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.docuNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYk.value;
  queryData.value.type = ztFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpPurchaseResult(queryData.value)
    .then(res => {
      ypPurchaseUploadData.value = res;
    })
    .catch(() => {
      ypPurchaseUploadData.value = [];
    });
};

// 查询药品销售/退货上传结果信息
const queryCodgSelinfoUploadResult = () => {
  selectSelinfoDataList.value = [];
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryData.value.startTime = dateS.startTime;
    queryData.value.endTime = dateS.endTime;
  } else {
    queryData.value.startTime = start;
    queryData.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  queryData.value.patNo = keyCode.value;
  queryData.value.groupNo = uploadGroupNoYf.value;
  queryData.value.setlId = setlId.value;
  queryData.value.type = ztFlag.value;
  queryData.value.uploadFlag = retFlag.value;
  selectYpSelinfoResult(queryData.value)
    .then(res => {
      ypSelinfoUploadData.value = res;
    })
    .catch(() => {
      ypSelinfoUploadData.value = [];
    });
};

// 查询
const queryItem = () => {
  if (editableTabsValue.value === "ypInvinfo") {
    queryCodgInvinfoUpload();
  } else if (editableTabsValue.value === "ypPurchase") {
    queryCodgPurchaseUpload();
  } else if (editableTabsValue.value === "ypSelinfo") {
    queryCodgSelinfoUpload();
  } else if (editableTabsValue.value === "ypPurchaseCx") {
    queryCodgPurchaseUploadResult();
  } else if (editableTabsValue.value === "ypSelinfoCx") {
    queryCodgSelinfoUploadResult();
  } else if (editableTabsValue.value === "ypInvinfoCx") {
    queryCodgInvinfoUploadResult();
  }
};

const handleClick = (tab, event) => {
  // 查询哪个tab页面
  editableTabsValue.value = tab.props.name;
  if (editableTabsValue.value === "ypInvinfo") {
    queryCodgInvinfoUpload();
  } else if (editableTabsValue.value === "ypPurchase") {
    queryCodgPurchaseUpload();
  } else if (editableTabsValue.value === "ypSelinfo") {
    queryCodgSelinfoUpload();
  } else if (editableTabsValue.value === "ypPurchaseCx") {
    queryCodgPurchaseUploadResult();
  } else if (editableTabsValue.value === "ypSelinfoCx") {
    queryCodgSelinfoUploadResult();
  } else if (editableTabsValue.value === "ypInvinfoCx") {
    queryCodgInvinfoUploadResult();
  }
};

// 批量上传
const uploadYpGoods = () => {
  ElMessageBox.confirm("请确认是否批量上传选择的内容？", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    type: "warning",
    distinguishCancelAndClose: true,
  }).then(() => {
    if ("ypInvinfo" === editableTabsValue.value) {
      uploadYpInvinfoGoods(selectInvinfoDataList.value);
    } else if ("ypInvinfoCx" === editableTabsValue.value) {
      uploadYpInvinfoGoods(selectInvinfoDataList.value);
    } else if ("ypPurchase" === editableTabsValue.value) {
      uploadYpPurchaseGoods(selectPurchaseDataList.value);
    } else if ("ypPurchaseCx" === editableTabsValue.value) {
      uploadYpPurchaseGoods(selectPurchaseDataList.value);
    } else if ("ypSelinfo" === editableTabsValue.value) {
      uploadYpSelinfoGoods(selectSelinfoDataList.value);
    } else if ("ypSelinfoCx" === editableTabsValue.value) {
      uploadYpSelinfoGoods(selectSelinfoDataList.value);
    } else {
      ElMessage({
        type: "warning",
        message: "请选择正确的查询模式！",
        duration: 2500,
        showClose: true,
      });
      return false;
    }
  });
};

// 药品库存变更单个上传
const selectDataS = ref([]);
const uploadYpInvinfoSingle = row => {
  selectDataS.value.push(row);
  uploadYpInvinfoGoods(selectDataS.value);
  selectData.value = [];
};

const uploadYpInvinfoGoods = data => {
  if (data.length === 0) {
    ElMessage({
      type: "warning",
      message: "请选择需要上传的药品库存变更数据！",
      duration: 2500,
      showClose: true,
    });
    return false;
  }
  uploadYpInvinfoBatch(data)
    .then(res => {
      ElMessage({
        type: "success",
        message: res.msg,
        duration: 2500,
        showClose: true,
      });
      queryItem();
    })
    .catch(() => {});
};

// 药品入库/退货单个上传
const selectData = ref([]);
const uploadYpPurchaseSingle = row => {
  selectData.value.push(row);
  uploadYpPurchaseGoods(selectData.value);
  selectData.value = [];
};

const uploadYpPurchaseGoods = data => {
  if (data.length === 0) {
    ElMessage({
      type: "warning",
      message: "请选择需要上传的药品入库/退货数据！",
      duration: 2500,
      showClose: true,
    });
    return false;
  }
  if (ztFlag.value === "1") {
    uploadYpPurchaseBatch(data)
      .then(res => {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 2500,
          showClose: true,
        });
      })
      .catch(() => {});
  } else if (ztFlag.value === "2") {
    uploadYpPurchaseReturnBatch(data)
      .then(res => {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 2500,
          showClose: true,
        });
      })
      .catch(() => {});
  }
  queryCodgPurchaseUpload();
};

// 删除上传信息
const deleteYpGoods = () => {
  ElMessageBox.confirm("请确认是否批量删除选择的内容？", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    type: "warning",
    distinguishCancelAndClose: true,
  }).then(() => {
    let uploadData = ref([]);
    if ("ypInvinfoCx" === editableTabsValue.value) {
      selectInvinfoDataListCx.value[0].type = "0";
      uploadData.value = selectInvinfoDataListCx.value;
    } else if ("ypPurchaseCx" === editableTabsValue.value) {
      selectPurchaseDataListCx.value[0].type = ztFlag.value;
      uploadData.value = selectPurchaseDataListCx.value;
    } else if ("ypSelinfoCx" === editableTabsValue.value) {
      selectSelinfoDataListCx.value[0].type = ztFlag.value;
      uploadData.value = selectSelinfoDataListCx.value;
    } else {
      ElMessage({
        type: "warning",
        message: "请选择正确的查询模式！",
        duration: 2500,
        showClose: true,
      });
      return false;
    }
    if (uploadData.value.length === 0) {
      ElMessage({
        type: "warning",
        message: "请选择需要删除的数据！",
        duration: 2500,
        showClose: true,
      });
      return false;
    }
    deleteYpUploadBatch(uploadData.value)
      .then(res => {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 2500,
          showClose: true,
        });
        queryItem();
      })
      .catch(() => {});
  });
};
// 更新退货的发票号
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const formData = ref({
  inDocuNo: "",
  inSeri: "",
  medListCodg: "",
  chargeName: "",
  serial: "",
  purcInvoNo: "",
});
const callYpInvoice = row => {
  dialogFormVisible.value = true;
  formData.value = row;
};

const updateYpInvoice = () => {
  if (!formData.value.purcInvoNo) {
    ElMessage({
      type: "warning",
      message: "请选择填写发票号！",
      duration: 2500,
      showClose: true,
    });
    return false;
  }
  saveYpInvoice(formData.value)
    .then(res => {
      ElMessage({
        type: "success",
        message: res.msg,
        duration: 2500,
        showClose: true,
      });
      queryCodgPurchaseUpload();
      dialogFormVisible.value = false;
    })
    .catch(() => {});
};

// -------- 商品销售上传相关 -----------------
const uploadYpSelinfoGoods = data => {
  if (data.length === 0) {
    ElMessage({
      type: "warning",
      message: "请选择需要上传的药品销售/退货数据！",
      duration: 2500,
      showClose: true,
    });
    return false;
  }
  if (ztFlag.value === "3") {
    uploadYpSelinfoBatch(data)
      .then(res => {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 2500,
          showClose: true,
        });
        queryItem();
      })
      .catch(() => {});
  } else if (ztFlag.value === "4") {
    uploadYpSelinfoReturnBatch(data)
      .then(res => {
        ElMessage({
          type: "success",
          message: res.msg,
          duration: 2500,
          showClose: true,
        });
        queryItem();
      })
      .catch(() => {});
  }
};
</script>