greater_wms/templates/src/pages/outbound/neworder.vue

<template>
  <div>
    <transition appear enter-active-class="animated fadeIn">
      <q-table
        class="my-sticky-header-column-table shadow-24"
        :data="table_list"
        row-key="id"
        :separator="separator"
        :loading="loading"
        :columns="columns"
        hide-bottom
        :pagination.sync="pagination"
        no-data-label="No data"
        no-results-label="No data you want"
        :table-style="{ height: height }"
        flat
        bordered
      >
        <template v-slot:top>
          <q-btn-group push>
            <q-btn
              :label="$t('new')"
              icon="add"
              @click="
                newForm = true;
                newFormData.creater = login_name;
              "
            >
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[10, 10]"
                content-style="font-size: 12px"
                >{{ $t("newtip") }}</q-tooltip
              >
            </q-btn>
            <q-btn :label="$t('refresh')" icon="refresh" @click="reFresh()">
              <q-tooltip
                content-class="bg-amber text-black shadow-4"
                :offset="[10, 10]"
                content-style="font-size: 12px"
                >{{ $t("refreshtip") }}</q-tooltip
              >
            </q-btn>
          </q-btn-group>
          <q-space />
          <div class="flex items-center">
            <q-input
              outlined
              rounded
              dense
              debounce="200"
              color="primary"
              v-model="filter"
              :placeholder="'输入名称搜索'"
              @input="getSearchList()"
              @keyup.enter="getSearchList()"
            >
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template v-if="props.row.id === editid">
              <q-td key="detail" :props="props">
                <q-btn
                  round
                  flat
                  push
                  color="black"
                  icon="description"
                  @click="detailData(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ "查看批次详情" }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="detail" :props="props">
                <q-btn
                  round
                  flat
                  push
                  color="black"
                  icon="description"
                  @click="detailData(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ "查看批次详情" }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_date" :props="props">{{
                props.row.bound_date
              }}</q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_date" :props="props">{{
                props.row.bound_date
              }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_code" :props="props">{{
                props.row.bound_code
              }}</q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_code" :props="props">{{
                props.row.bound_code
              }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_code_type" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_code_type"
                  :label="'单据类型'"
                  autofocus
                  :options="bound_code_type_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_code_type" :props="props">
                {{
                  bound_code_type_map[props.row.bound_code_type] ||
                  props.row.bound_code_type
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_bs_type" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_bs_type"
                  :label="'单据类型'"
                  :options="bound_bs_type_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_bs_type" :props="props">
                {{
                  bound_bs_type_map[props.row.bound_bs_type] ||
                  props.row.bound_bs_type
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_desc" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_desc"
                  :label="'出入库类别'"
                  :options="bound_desc_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_desc" :props="props">
                {{
                  bound_desc_map[props.row.bound_desc] || props.row.bound_desc
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_department" :props="props">
                <q-select
                  dense
                  outlined
                  square
                  v-model="editFormData.bound_department"
                  :label="'部门'"
                  :options="bound_department_list"
                  option-label="label"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_department" :props="props">
                {{
                  bound_department_map[props.row.bound_department] ||
                  props.row.bound_department
                }}</q-td
              >
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="creater" :props="props">
                <q-input
                  dense
                  outlined
                  square
                  v-model.number="editFormData.creater"
                  :label="'经办人'"
                  :rules="[(val) => (val && val > 0) || error1]"
                />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="creater" :props="props">{{ props.row.creater }}</q-td>
            </template>

            <template v-if="props.row.id === editid">
              <q-td key="bound_status" :props="props">
                {{
                  bound_status_map[props.row.bound_status] ||
                  props.row.bound_status
                }}</q-td
              >
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bound_status" :props="props">
                {{
                  bound_status_map[props.row.bound_status] ||
                  props.row.bound_status
                }}</q-td
              >
            </template>

            <template v-if="!editMode">
              <q-td key="action" :props="props" style="width: 100px">
                <!-- <q-btn
                  round
                  flat
                  push
                  color="purple"
                  icon="edit"
                  @click="editData(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ $t("edit") }}</q-tooltip
                  >
                </q-btn> -->
                <q-btn
                  round
                  flat
                  push
                  color="dark"
                  icon="trolley"
                  @click="change_status(props.row)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >确认出库</q-tooltip
                  >
                </q-btn>
                <q-btn
                  round
                  flat
                  push
                  color="dark"
                  icon="delete"
                  @click="deleteData(props.row.id)"
                >
                  <q-tooltip
                    content-class="bg-amber text-black shadow-4"
                    :offset="[10, 10]"
                    content-style="font-size: 12px"
                    >{{ $t("delete") }}</q-tooltip
                  >
                </q-btn>
              </q-td>
            </template>
            <template v-else-if="editMode">
              <template v-if="props.row.id === editid">
                <q-td key="action" :props="props" style="width: 100px">
                  <q-btn
                    round
                    flat
                    push
                    color="secondary"
                    icon="check"
                    @click="editDataSubmit()"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("confirmedit") }}</q-tooltip
                    >
                  </q-btn>
                  <q-btn
                    round
                    flat
                    push
                    color="red"
                    icon="close"
                    @click="editDataCancel()"
                  >
                    <q-tooltip
                      content-class="bg-amber text-black shadow-4"
                      :offset="[10, 10]"
                      content-style="font-size: 12px"
                      >{{ $t("canceledit") }}</q-tooltip
                    >
                  </q-btn>
                </q-td>
              </template>
              <template v-else-if="props.row.id !== editid"></template>
            </template>
          </q-tr>
        </template>
      </q-table>
    </transition>
    <template>
      <div v-show="max !== 0" class="q-pa-lg flex flex-center">
        <div>{{ total }}</div>
        <q-pagination
          v-model="current"
          color="black"
          :max="max"
          :max-pages="6"
          boundary-links
          @click="
            getSearchList(current);
            paginationIpt = current;
          "
        />
        <div>
          <input
            v-model="paginationIpt"
            @blur="changePageEnter"
            @keyup.enter="changePageEnter"
            style="width: 60px; text-align: center"
          />
        </div>
      </div>
      <div v-show="max === 0" class="q-pa-lg flex flex-center">
        <q-btn flat push color="dark" :label="$t('no_data')"></q-btn>
      </div>
    </template>
    <q-dialog v-model="newForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("newtip") }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-amber text-black shadow-4">{{
              $t("index.close")
            }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section style="max-height: 325px; width: 400px" class="scroll">
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_code_type"
            :label="'单据类型'"
            autofocus
            :options="bound_code_type_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_bs_type"
            :label="'业务类型'"
            :options="bound_bs_type_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_desc"
            :label="'出入库类别'"
            :options="bound_desc_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-select
            dense
            outlined
            square
            v-model="newFormData.bound_department"
            :label="'部门'"
            :options="bound_department_list"
            option-label="label"
            option-value="value"
            emit-value
            map-options
            transition-show="scale"
            transition-hide="scale"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
          <q-input
            dense
            outlined
            square
            v-model="newFormData.creater"
            :label="'经办人'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
        </q-card-section>

        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="newDataCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="newDataSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog v-model="deleteForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ $t("delete") }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip>{{ $t("index.close") }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section
          style="min-height: 325px; width: 550px"
          class="scroll"
          >{{ $t("deletetip") }}</q-card-section
        >
        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="deleteDataCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="deleteDataSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog v-model="newBatchForm">
      <q-card class="shadow-24">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>{{ "新建出库批次" }}</div>
          <q-space />
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-amber text-black shadow-4">{{
              $t("index.close")
            }}</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section style="min-height: 325px; width: 550px" class="scroll">
          <div class="text-h6 q-mb-md">
            {{ "目标批次信息" }}
            <q-select
              dense
              outlined
              square
              v-model="newBatchFormData.out_type"
              :label="'物料'"
              :options="out_type_list"
              option-label="label"
              option-value="value"
              emit-value
              map-options
              transition-show="scale"
              transition-hide="scale"
              :rules="[(val) => (val && val.length > 0) || error1]"
            />

            <div class="row q-gutter-x-md">
              <div class="col column q-gutter-y-md">
                <q-select
                  dense
                  outlined
                  square
                  v-model="target_batch"
                  :label="'物料编码'"
                  :options="product_list"
                  option-label="value"
                  option-value="value"
                  emit-value
                  map-options
                  transition-show="scale"
                  transition-hide="scale"
                  :rules="[(val) => (val && val.length > 0) || error1]"
                />
              </div>

              <div class="col column q-gutter-y-md">
                <q-input
                  outlined
                  dense
                  color="primary"
                  v-model="product_filter"
                  :placeholder="'搜索批次号'"
                  autofocus
                  @input="getProductSearchList()"
                  @keyup.enter="getProductSearchList()"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
              </div>
            </div>

            <q-select
              dense
              outlined
              square
              v-model="newBatchFormData.goods_code"
              :label="'物料'"
              :options="product_list"
              option-label="label"
              option-value="value"
              emit-value
              map-options
              :readonly="true"
              transition-show="scale"
              transition-hide="scale"
              :rules="[(val) => (val && val.length > 0) || error1]"
            />
            <div class="q-mb-md">
              {{ "已有批次信息" }}
              <div style="float: right; padding: 15px 15px 15px 0">
                <q-btn color="primary" @click="get_refresh_data()">{{
                  "刷新"
                }}</q-btn>
              </div>
            </div>
            <q-card class="q-mb-md" bordered>
              <q-card-section class="q-pt-md">
                <div class="row q-gutter-x-md">
                  <div class="col column q-gutter-y-md">
                    <q-input
                      dense
                      outlined
                      square
                      v-model.number="newBatchFormData.goods_weight"
                      :label="'单重'"
                      type="number"
                      :rules="[(val) => (val && val > 0) || error1]"
                      :readonly="true"
                    />
                    <q-input
                      dense
                      outlined
                      square
                      v-model.number="newBatchFormData.goods_qty"
                      :label="'当前数量'"
                      type="number"
                      :readonly="true"
                      :rules="[(val) => (val && val > 0) || error1]"
                    />
                  </div>
                  <div class="col column q-gutter-y-md">
                    <q-input
                      dense
                      outlined
                      square
                      v-model="newBatchFormData.goods_unit"
                      :label="'单位'"
                      :rules="[(val) => (val && val.length > 0) || error1]"
                      :readonly="true"
                    />
                    <q-input
                      dense
                      outlined
                      square
                      v-model="newBatchFormData.goods_std"
                      :label="'规格/备注'"
                      :rules="[(val) => (val && val.length > 0) || error1]"
                      :readonly="true"
                    />
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
          <q-input
            dense
            outlined
            square
            v-model="newBatchFormData.goods_desc"
            :label="'名称'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />

          <q-input
            dense
            outlined
            square
            v-model.number="newBatchFormData.goods_out_qty"
            :label="'出库数量'"
            type="number"
            :rules="[(val) => (val && val > 0) || error1]"
          />
          <q-input
            dense
            outlined
            square
            v-model="newBatchFormData.creater"
            :label="'经办人'"
            :rules="[(val) => (val && val.length > 0) || error1]"
          />
        </q-card-section>

        <div style="float: right; padding: 15px 15px 15px 0">
          <q-btn
            color="white"
            text-color="black"
            style="margin-right: 25px"
            @click="newBatchCancel()"
            >{{ $t("cancel") }}</q-btn
          >
          <q-btn color="primary" @click="newBatchSubmit()">{{
            $t("submit")
          }}</q-btn>
        </div>
      </q-card>
    </q-dialog>
    <q-dialog
      v-model="detailForm"
      transition-show="jump-down"
      transition-hide="jump-up"
    >
      <q-card style="min-width: 900px">
        <q-bar
          class="bg-light-blue-10 text-white rounded-borders"
          style="height: 50px"
        >
          <div>
            {{ "出库信息" }}
          </div>
          <q-space></q-space>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip
              content-class="bg-amber text-black shadow-4"
              :offset="[20, 20]"
              content-style="font-size: 12px"
            >
              {{ $t("index.close") }}</q-tooltip
            >
          </q-btn>
        </q-bar>
        <q-card-section class="q-pt-md">
          <q-tabs v-model="activeTab">
            <q-tab name="tab1" label="出库信息" />
            <!-- <q-tab name="tab2" label="货物信息" /> -->
          </q-tabs>
        </q-card-section>
        <!-- 选项卡内容 -->
        <q-tab-panels v-model="activeTab" animated>
          <q-tab-panel name="tab1" style="height: 70px">
            <div class="row q-gutter-x-md">
              <div class="col column q-gutter-y-md">
                <q-input
                  dense
                  outlined
                  square
                  v-model="table_detail.bound_date"
                  :label="'单据时间'"
                  :readonly="true"
                />
              </div>
              <div class="col column q-gutter-y-md">
                <q-input
                  dense
                  outlined
                  square
                  v-model="table_detail.bound_code"
                  :label="'单据编码'"
                  :readonly="true"
                />
              </div>
            </div>
          </q-tab-panel>
        </q-tab-panels>

        <div
          style="float: right; padding: 15px 15px 50px 15px; min-width: 100%"
          flow="row wrap"
        >
          <q-card class="q-mb-md" bordered>
            <q-card-actions
              class="q-px-none"
              style="position: absolute; right: 20px; top: 10px; z-index: 100"
            >
              <q-btn
                icon="add"
                flat
                dense
                color="primary"
                @click="addbatch(table_detail.id)"
                :label="$t('stock.add')"
              />
            </q-card-actions>
            <q-card-section>
              <template>
                <div class="text-h6 q-mb-md">{{ "批次信息" }}</div>
                <template v-if="batch_detail.length > 0">
                  <div
                    v-for="(item, index) in batch_detail"
                    :key="index"
                    class="row q-col-gutter-md q-mb-sm"
                  >
                    <div class="col" style="min-width: 150px">
                      <q-input
                        v-model="item.bound_batch.out_number"
                        :label="'批次'"
                        :readonly="onlyread"
                        dense
                        outlined
                      />
                    </div>
                    <div class="col">
                      <q-input
                        v-model="item.bound_batch.goods_desc"
                        :label="'货物'"
                        :readonly="onlyread"
                        dense
                        outlined
                      />
                    </div>
                    <div class="col">
                      <q-input
                        v-model="item.bound_batch.goods_weight"
                        :label="'单重'"
                        :readonly="onlyread"
                        dense
                        outlined
                      />
                    </div>
                    <div class="col">
                      <q-input
                        v-model="item.bound_batch.goods_out_qty"
                        :label="'出库数量'"
                        :readonly="onlyread"
                        dense
                        outlined
                      />
                    </div>
                    <!-- <div class="col" style="max-width: 50px">
                      <q-btn
                        v-if="!onlyread"
                        icon="delete"
                        flat
                        dense
                        color="primary"
                        @click="addbatch(table_detail.id)"
                        style="margin-top: 1px"
                      />
                    </div> -->
                  </div>
                </template>
              </template>
            </q-card-section>
          </q-card>
        </div>
      </q-card>
    </q-dialog>
  </div>
</template>
<router-view />

<script>
import { getauth, postauth, putauth, deleteauth } from 'boot/axios_request'

import { date, exportFile, LocalStorage } from 'quasar'

export default {
  name: 'Pagednlist',
  data () {
    return {
      createDate1: '',
      createDate2: '',
      date_range: '',
      proxyDate: '',
      date: '',
      goods_code: '',
      goods_desc: '',
      openid: '',
      login_name: '',
      authin: '0',
      warehouse_code: '',
      warehouse_name: '',

      searchUrl: '',
      pathname: 'bound/list/',
      pathfilename: 'bound/file/',

      pathname_previous: '',
      pathname_next: '',
      separator: 'cell',
      loading: false,
      height: '',

      printObj: {
        id: 'printMe',
        popTitle: this.$t('inbound.asn')
      },
      table_list: [],
      table_detail: {},
      batch_detail: [],
      bound_code_type_list: [],
      bound_code_type_map: [],
      bound_bs_type_list: [],
      bound_bs_type_map: [],
      bound_desc_list: [],
      bound_desc_map: [],
      bound_department_list: [],
      bound_department_map: [],
      bound_status_list: [],
      bound_status_map: [],
      product_list: [],
      product_map: [],
      out_type_list: [
        { label: '销售出库', value: '0' },
        { label: '其他出库', value: '4' }
      ],

      columns: [
        { name: 'detail', label: '详情', field: 'detail', align: 'center' },
        {
          name: 'bound_date',
          label: '单据日期',
          field: 'bound_date',
          align: 'center'
        },
        {
          name: 'bound_code',
          label: '单据编号',
          field: 'bound_code',
          align: 'center'
        },
        {
          name: 'bound_code_type',
          label: '单据类型',
          field: 'bound_code_type',
          align: 'center'
        },
        {
          name: 'bound_bs_type',
          label: '业务类型',
          field: 'bound_bs_type',
          align: 'center'
        },
        {
          name: 'bound_desc',
          label: '出入库类别',
          field: 'bound_desc',
          align: 'center'
        },
        {
          name: 'bound_department',
          label: '部门',
          field: 'bound_department',
          align: 'center'
        },
        { name: 'creater', label: '经办人', field: 'creater', align: 'center' },
        {
          name: 'bound_status',
          label: '状态',
          field: 'bound_status',
          align: 'center'
        },
        { name: 'action', label: '操作', align: 'center' }
      ],
      filter: '',
      product_filter: '',
      pagination: {
        page: 1,
        rowsPerPage: 11
      },
      newForm: false,
      newBatchForm: false,
      newFormData: {},
      newBatchFormData: {
        goods_code: '',
        goods_desc: '',
        goods_weight: 0,
        goods_qty: 0,
        goods_unit: '',
        goods_out_qty: 0,
        creater: '',
        out_number: '',
        out_type: '0',
        bound_list_id: 0,
        goods_std: '',
        goods_batch: ''
      },
      newDetailFormData: {},
      editid: 0,
      editFormData: {},
      editMode: false,
      deleteForm: false,
      detailForm: false,
      deleteid: 0,
      detailid: 0,
      bar_code: '',
      error1: this.$t('goods.view_goodslist.error1'),
      max: 0,
      total: 0,
      paginationIpt: 1,
      current: 1,
      onlyread: true,
      bound_batch_list: [],

      activeTab: 'tab1',
      target_batch: ''
    }
  },
  computed: {
    interval () {
      return (
        this.$t('download_center.start') +
        ' - ' +
        this.$t('download_center.end')
      )
    }
  },
  methods: {
    getList (params = {}) {
      var _this = this
      _this.loading = true
      // 合并基础参数
      const baseParams = {
        page: _this.current,
        base_type: '1',
        page_size: _this.pagination.rowsPerPage
      }

      // 创建URLSearchParams处理参数
      const queryParams = new URLSearchParams({
        ...baseParams,
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })

      getauth(`${_this.pathname}?${queryParams}`)
        .then((res) => {
          _this.table_list = res.results

          _this.total = res.count
          _this.max = Math.ceil(res.count / _this.pagination.rowsPerPage) || 0
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },
    changePageEnter () {
      if (Number(this.paginationIpt) < 1) {
        this.current = 1
        this.paginationIpt = 1
      } else if (Number(this.paginationIpt) > this.max) {
        this.current = this.max
        this.paginationIpt = this.max
      } else {
        this.current = Number(this.paginationIpt)
      }
      this.getSearchList(this.current)
    },

    get_refresh_data () {
      getauth('bound/batch/?bound_number=' + this.target_batch)
        .then((res) => {
          console.log('当前长度', res.results.length)
          console.log('当前值', res.results[0])
          if (res.results.length > 0) {
            this.newBatchFormData.goods_qty = res.results[0].goods_qty
            console.log('当前数目', this.newBatchFormData.goods_qty)
            this.newBatchFormData.goods_weight = res.results[0].goods_weight
            this.newBatchFormData.goods_std = res.results[0].goods_std
            this.newBatchFormData.goods_unit = res.results[0].goods_unit
          } else {
            this.newBatchFormData.goods_qty = ''
            this.newBatchFormData.goods_weight = ''
            this.newBatchFormData.goods_std = ''
            this.newBatchFormData.goods_unit = ''
          }
        })
        .catch((err) => {
          this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    getProductSearchList () {
      var _this = this
      _this.loading = true
      const params = {
        bound_number__icontains: _this.product_filter,
        max_page: 1000
      }
      const queryParams = new URLSearchParams({
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })

      getauth(`bound/batch/?${queryParams}`)
        .then((res) => {
          _this.product_list = res.results.map((item) => ({
            label: item.goods_desc,
            value: item.bound_number
          }))
          _this.product_map = res.results.reduce((acc, item) => {
            acc[item.bound_number] = item.goods_desc
            return acc
          }, {})
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },

    // 带搜索条件加载
    getSearchList (page = 1) {
      this.current = page
      this.paginationIpt = page
      this.getList({
        goods_desc__icontains: this.filter,
        document_date__range: this.date_range
      })
    },
    downloadlistData () {
      this.getfileList()
    },
    getfileList () {
      var _this = this
      _this.loading = true
      const params = {
        goods_desc__icontains: _this.filter,
        document_date__range: _this.date_range
      }
      const queryParams = new URLSearchParams({
        ...params
      })
      console.log(queryParams)
      // 过滤空值参数
      Array.from(queryParams.entries()).forEach(([key, value]) => {
        if (value === '' || value === null || value === undefined) {
          queryParams.delete(key)
        }
      })
      console.log(`${_this.pathfilename}?${queryParams}`)
      getauth(`${_this.pathfilename}?${queryParams}`)
        .then((res) => {
          var timeStamp = Date.now()
          var formattedString = date.formatDate(timeStamp, 'YYYYMMDDHHmmss')
          const status = exportFile(
            _this.pathfilename + 'list' + formattedString + '.csv',
            '\uFEFF' + res,
            'text/csv'
          )
          if (status !== true) {
            _this.$q.notify({
              message: 'Browser denied file download...',
              color: 'negative',
              icon: 'warning'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
        .finally(() => {
          _this.loading = false
        })
    },

    getListPrevious () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_previous, {})
          .then((res) => {
            _this.table_list = res.results
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch((err) => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    getListNext () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_next, {})
          .then((res) => {
            _this.table_list = res.results

            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch((err) => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      }
    },
    reFresh () {
      var _this = this
      _this.getSearchList()
    },

    newDataSubmit () {
      var _this = this

      _this.newFormData.bound_type = 'out'
      _this.newFormData.openid = _this.openid
      _this.newFormData.base_type = 1

      postauth(_this.pathname, _this.newFormData)
        .then((res) => {
          _this.getSearchList()
          _this.newDataCancel()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '成功新增数据',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    newBatchSubmit () {
      var _this = this

      _this.newBatchFormData.openid = _this.openid
      _this.newBatchFormData.warehouse_code = _this.warehouse_code
      _this.newBatchFormData.warehouse_name = _this.warehouse_name
      _this.newBatchFormData.bound_list_id = _this.detailid

      postauth('bound/outbatch/', _this.newBatchFormData)
        .then((res) => {
          if (res.status_code !== 500) {
            _this.newDetailFormData.bound_batch = res.id
            _this.newDetailFormData.creater = _this.login_name

            postauth('bound/outdetail/', _this.newDetailFormData).then(
              (res) => {
                if (res.status_code !== 500) {
                  _this.detailData(_this.newDetailFormData)

                  _this.$q.notify({
                    message: '成功新增数据',
                    icon: 'check',
                    color: 'green'
                  })
                }
              },
              (err) => {
                _this.$q.notify({
                  message: err.detail,
                  icon: 'close',
                  color: 'negative'
                })
              }
            )
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })

      getauth('bound/batch/?bound_number=' + this.target_batch)
        .then((res) => {
          console.log('当前长度', res.results.length)
          console.log('当前值', res.results[0])
          if (res.results.length > 0) {
            this.newBatchFormData.goods_qty = res.results[0].goods_qty
            console.log('当前数目', this.newBatchFormData.goods_qty)
            this.newBatchFormData.goods_weight = res.results[0].goods_weight
            this.newBatchFormData.goods_std = res.results[0].goods_std
            this.newBatchFormData.goods_unit = res.results[0].goods_unit
          } else {
            this.newBatchFormData.goods_qty = ''
            this.newBatchFormData.goods_weight = ''
            this.newBatchFormData.goods_std = ''
            this.newBatchFormData.goods_unit = ''
          }
        })
        .catch((err) => {
          this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    newDataCancel () {
      var _this = this
      _this.newForm = false
      _this.newFormData = {
        bound_code_type: '',
        bound_bs_type: '',
        bound_desc: '',
        bound_department: '',
        creater: ''
      }
    },
    addbatch (bound_number) {
      var _this = this
      _this.newBatchForm = true
      _this.newDetailFormData = {
        id: bound_number,
        bound_list: bound_number
      }
    },
    editData (e) {
      var _this = this
      _this.editMode = true
      _this.editid = e.id
      _this.editFormData = {
        bound_date: e.bound_date,
        bound_code: e.bound_code,
        bound_code_type: e.bound_code_type,
        bound_bs_type: e.bound_bs_type,
        bound_desc: e.bound_desc,

        bound_department: e.bound_department,
        creater: _this.login_name
      }
    },

    change_status (e) {
      var _this = this
      var status_FormData = {
        bound_list_id: e.id
      }

      postauth('container/out_task/', status_FormData)
        .then((res) => {
          _this.getSearchList()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '开始出库',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    editDataSubmit () {
      var _this = this
      _this.editFormData.bound_type = 'in'

      putauth(_this.pathname + _this.editid + '/', _this.editFormData)
        .then((res) => {
          _this.editDataCancel()
          _this.getSearchList()
          if (res.status_code !== 500) {
            _this.$q.notify({
              message: '成功编辑数据',
              icon: 'check',
              color: 'green'
            })
          }
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    editDataCancel () {
      var _this = this
      _this.editMode = false
      _this.editid = 0
      _this.editFormData = {
        bound_date: '',
        bound_code: '',
        bound_code_type: '',
        bound_bs_type: '',
        bound_desc: '',

        bound_department: '',
        creater: ''
      }
    },
    deleteData (e) {
      var _this = this
      _this.deleteForm = true
      _this.deleteid = e
    },
    detailData (e) {
      var _this = this
      _this.detailForm = true
      _this.detailid = e.id
      console.log('detail查询的id是:', _this.detailid)
      getauth(_this.pathname + _this.detailid + '/')
        .then((res) => {
          _this.table_detail = res
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      console.log('detail查询的结果是:', _this.table_detail)

      getauth('bound/outdetail/?bound_list=' + _this.detailid)
        .then((res) => {
          _this.batch_detail = res.results
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    deleteDataSubmit () {
      var _this = this
      deleteauth(_this.pathname + _this.deleteid + '/')
        .then((res) => {
          _this.deleteDataCancel()
          _this.getSearchList()
          _this.$q.notify({
            message: '成功删除数据',
            icon: 'check',
            color: 'green'
          })
        })
        .catch((err) => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    deleteDataCancel () {
      var _this = this
      _this.deleteForm = false
      _this.deleteid = 0
    },

    updateProxy () {
      var _this = this
      _this.proxyDate = _this.date
    }
  },
  created () {
    var _this = this
    if (LocalStorage.has('openid')) {
      _this.openid = LocalStorage.getItem('openid')
    } else {
      _this.openid = ''
      LocalStorage.set('openid', '')
    }
    if (LocalStorage.has('warehouse_code')) {
      _this.warehouse_code = LocalStorage.getItem('warehouse_code')
    }
    if (LocalStorage.has('warehouse_name')) {
      _this.warehouse_name = LocalStorage.getItem('warehouse_name')
    }
    if (LocalStorage.has('login_name')) {
      _this.login_name = LocalStorage.getItem('login_name')
    } else {
      _this.login_name = ''
      LocalStorage.set('login_name', '')
    }
    if (LocalStorage.has('auth')) {
      const timeStamp = Date.now()
      const formattedString = date.formatDate(timeStamp, 'YYYY/MM/DD')
      _this.date = formattedString
      console.log(_this.date)
      _this.authin = '1'
      _this.getList()
    } else {
      _this.authin = '0'
    }
    getauth('warehouse/boundcodetype/', {})
      .then((res) => {
        _this.bound_code_type_list = res.results.map((item) => ({
          label: item.bound_code_type_name,
          value: item.bound_code_type_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_code_type_map = res.results.reduce((acc, item) => {
          acc[item.bound_code_type_code] = item.bound_code_type_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/boundtype/', {})
      .then((res) => {
        _this.bound_desc_list = res.results.map((item) => ({
          label: item.bound_type_name,
          value: item.bound_type_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_desc_map = res.results.reduce((acc, item) => {
          acc[item.bound_type_code] = item.bound_type_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/department/', {})
      .then((res) => {
        _this.bound_department_list = res.results.map((item) => ({
          label: item.department_name,
          value: item.department_code
        }))
        _this.bound_department_map = res.results.reduce((acc, item) => {
          acc[item.department_code] = item.department_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/boundbusiness/', {})
      .then((res) => {
        _this.bound_bs_type_list = res.results.map((item) => ({
          label: item.bound_bs_name,
          value: item.bound_bs_code
        }))
        // 编码 → 名称的映射（普通对象，确保响应式）
        _this.bound_bs_type_map = res.results.reduce((acc, item) => {
          acc[item.bound_bs_code] = item.bound_bs_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })

    getauth('warehouse/status/', {})
      .then((res) => {
        _this.bound_status_list = res.results.map((item) => ({
          label: item.bound_status_name,
          value: item.bound_status_code
        }))
        _this.bound_status_map = res.results.reduce((acc, item) => {
          acc[item.bound_status_code] = item.bound_status_name
          return acc
        }, {})
      })
      .catch((err) => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })
  },

  mounted () {
    var _this = this
    if (_this.$q.platform.is.electron) {
      _this.height = String(_this.$q.screen.height - 290) + 'px'
    } else {
      _this.height = _this.$q.screen.height - 290 + '' + 'px'
    }
    _this.newFormData.creater = _this.login_name
  },
  updated () {},
  destroyed () {},

  watch: {
    target_batch (val) {
      if (val) {
        this.newBatchFormData.goods_code = val.split('-')[0]
        this.newBatchFormData.out_number = val
        this.newBatchFormData.goods_desc = this.product_map[val]
      } else {
        this.newBatchFormData.goods_code = ''
        this.newBatchFormData.out_number = ''
        this.newBatchFormData.goods_desc = ''
      }
      getauth('bound/batch/?bound_number=' + val)
        .then((res) => {
          console.log('当前长度', res.results.length)
          console.log('当前值', res.results[0])
          if (res.results.length > 0) {
            this.newBatchFormData.goods_qty = res.results[0].goods_qty
            console.log('当前数目', this.newBatchFormData.goods_qty)
            this.newBatchFormData.goods_weight = res.results[0].goods_weight
            this.newBatchFormData.goods_std = res.results[0].goods_std
            this.newBatchFormData.goods_unit = res.results[0].goods_unit
          } else {
            this.newBatchFormData.goods_qty = ''
            this.newBatchFormData.goods_weight = ''
            this.newBatchFormData.goods_std = ''
            this.newBatchFormData.goods_unit = ''
          }
        })
        .catch((err) => {
          this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    createDate1 (val) {
      if (val) {
        if (val.to) {
          this.createDate2 = `${val.from} - ${val.to}`
          this.date_range = `${val.from},${val.to} `

          // this.downloadhUrl = this.pathname + 'filelist/?' + 'document_date__range=' + this.date_range
        } else {
          this.createDate2 = `${val}`
          this.dateArray = val.split('/')
          this.searchUrl =
            this.pathname +
            '?' +
            'document_date__year=' +
            this.dateArray[0] +
            '&' +
            'document_date__month=' +
            this.dateArray[1] +
            '&' +
            'document_date__day=' +
            this.dateArray[2]
          // this.downloadhUrl = this.pathname + 'filelist/?' + 'document_date__year=' + this.dateArray[0] + '&' + 'document_date__month=' + this.dateArray[1] + '&' + 'document_date__day=' + this.dateArray[2]
        }
        this.date_range = this.date_range.replace(/\//g, '-')

        this.getSearchList()
        this.$refs.qDateProxy.hide()
      } else {
        this.createDate2 = ''
        this.date_range = ''
        this.getSearchList()
      }
    }
  }
}
</script>
<style scoped>
/* 添加在 <style> 中 */
.q-date__calendar-item--selected {
  transition: all 0.3s ease;
  background-color: #1976d2 !important;
}

.q-date__range {
  background-color: rgba(25, 118, 210, 0.1);
}

:deep(.q-field__label) {
  margin-top: 8px;
  align-self: center;
}

:deep(.q-field__control-container) {
  padding-left: 50px;
  margin-top: -5px;
}
</style>