greater_wms/templates/src/pages/container/containeroperate.vue

<template>
  <div style="margin-top: 42px;">

    <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:header-cell="props">
          <q-th :props="props" @dblclick="handleHeaderDblClick(props.col)">
            <!-- 为特定列添加下拉选择器 -->
            <template v-if="['bound_department'].includes(props.col.name)">
              <q-select
                dense
                outlined
                v-model="filterModels[props.col.name]"
                :options="getFilterOptions(props.col.name)"
                option-label="label"
                option-value="value"
                emit-value
                map-options
                clearable
                @input="handleFilterChange"
                style="min-width: 120px"
              >
                <template v-slot:prepend>
                  <span class="text-caption">{{ props.col.label }}</span>
                </template>
              </q-select>
            </template>
            <template v-else>
              {{ props.col.label }}
            </template>
          </q-th>
        </template>
        <template v-slot:top>
          <q-btn-group push>

            <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">
            <div class="q-mr-md">{{ $t("download_center.createTime") }}</div>
            <q-input readonly outlined dense v-model="createDate2" :placeholder="interval">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <q-date v-model="createDate1" range>
                      <div class="row items-center justify-end q-gutter-sm">
                        <q-btn :label="$t('index.cancel')" color="primary" flat v-close-popup />
                        <q-btn :label="$t('index.clear')" color="primary" @click="createDate2 = ''; createDate1 = '';"
                          v-close-popup />

                      </div>
                    </q-date>
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-btn-group push class="q-ml-md">
            </q-btn-group>
            <q-input outlined rounded dense debounce="300" color="primary" v-model="filter" :placeholder="$t('search')"
              @input="getSearchList()" @keyup.enter="getSearchList()">
              <template v-slot:append>
                <q-icon name="search" @click="getSearchList()" />
              </template>
            </q-input>
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template >
              <q-td key="document_date" :props="props">{{ props.row.batch_detail.bound_list.bound_date }}</q-td>
            </template>            
            <template >
              <q-td key="document_number" :props="props">{{ props.row.batch_detail.bound_list.bound_code }}</q-td>
            </template>
            <template >
              <q-td key="document_type" :props="props">{{ props.row.batch_detail.bound_list.bound_code_type }}</q-td>
            </template>            
            <template >
              <q-td key="business_type" :props="props">{{ props.row.batch_detail.bound_list.bound_bs_type }}</q-td>
            </template>
            <template >
              <q-td key="iout_type" :props="props">{{ props.row.batch_detail.bound_list.bound_type  }}</q-td>
            </template>            
            <template >
              <q-td key="department" :props="props">{{ props.row.batch_detail.bound_list.bound_department }}</q-td>
            </template>            
            <template >
              <q-td key="warehouse_code" :props="props">{{ props.row.batch_detail.bound_batch.warehouse_code }}</q-td>
            </template>            
            <template >
              <q-td key="warehouse_name" :props="props">{{ props.row.batch_detail.bound_batch.warehouse_name }}</q-td>
            </template>            
            <template >
              <q-td key="goods_code" :props="props">{{ props.row.batch_detail.bound_batch.goods_code }}</q-td>
            </template>            
            <template >
              <q-td key="goods_desc" :props="props">{{ props.row.batch_detail.bound_batch.goods_desc }}</q-td>
            </template>            
            
            <template >
              <q-td key="goods_std" :props="props">{{ props.row.batch_detail.bound_batch.goods_std }}</q-td>
            </template>            
            <template >
              <q-td key="goods_batch" :props="props">{{ props.row.container_detail.batch.bound_number }}</q-td>
            </template>            
            <template >
              <q-td key="in_batch" :props="props">{{ props.row.container_detail.batch.goods_code}}</q-td>
            </template>            
            <template >
              <q-td key="out_batch" :props="props">{{ props.row.batch_detail.bound_batch.out_batch }}</q-td>
            </template>            
            <template >
              <q-td key="goods_unit" :props="props">{{ props.row.batch_detail.bound_batch.goods_unit }}</q-td>
            </template>            
            <template >
              <q-td key="goods_in" :props="props">{{ props.row.batch_detail.bound_batch.goods_in }}</q-td>
            </template>            
            <template >
              <q-td key="goods_out" :props="props">{{ props.row.batch_detail.bound_list.goods_out }}</q-td>
            </template>            
            <template >
              <q-td key="goods_notes" :props="props">{{ props.row.task_wcs.message}}</q-td>
            </template>            
            <template >
              <q-td key="creator" :props="props">{{ props.row.container_detail.creater}}</q-td>
            </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>

  </div>
</template>
<router-view />

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


export default {
  name: 'PageTask',
  data() {
    return {
      createDate1: '',
      createDate2: '',
      date_range: '',
      proxyDate: '',
      date: '',
      goods_code: '',
      goods_desc: '',
      openid: '',
      login_name: '',
      authin: '0',
      searchUrl: '',
      pathname: 'container/task/',

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

      table_list: [],
      columns: [
          { name: 'document_date', required: true, label: '单据日期', align: 'left', field: 'document_date' },
          { name: 'document_number', label: '单据编号', field: 'document_number', align: 'center' },
          { name: 'document_type', label: '单据类型', field: 'document_type', align: 'center' },
          { name: 'business_type', label: '业务类型', field: 'business_type', align: 'center' },
          { name: 'iout_type', label: '出入库类型', field: 'iout_type', align: 'center' },
          { name: 'department', label: '部门', field: 'department', align: 'center' },
          { name: 'warehouse_code', label: '仓库编码', field: 'warehouse_code', align: 'center' },
          { name: 'warehouse_name', label: '仓库名称', field: 'warehouse_name', align: 'center' },
          { name: 'goods_code', label: '存货编码', field: 'goods_code', align: 'center' },
          { name: 'goods_desc', label: '存货', field: 'goods_desc', align: 'center' },
          { name: 'goods_std', label: '规格型号', field: 'goods_std', align: 'center' },
          { name: 'goods_batch', label: '批号', field: 'goods_batch', align: 'center' },
          { name: 'in_batch', label: '入库批号', field: 'in_batch', align: 'center' },
          { name: 'out_batch', label: '出库批号', field: 'out_batch', align: 'center' },
          { name: 'goods_unit', label: '计量单位', field: 'goods_unit', align: 'center' },
          { name: 'goods_in', label: '本期入库', field: 'goods_in', align: 'center' },
          { name: 'goods_out', label: '本期出库', field: 'goods_out', align: 'center' },
          { name: 'goods_notes', label: '备注', field: 'goods_notes', align: 'center' },
          { name: 'creator', label: '创建人', field: 'creator', align: 'center' },

        ],
      filter: '',
      pagination: {
        page: 1,
        rowsPerPage: 11
      },
      current: 1,
      max: 0,
      total: 0,
      paginationIpt: 1,
      current: 1,
            filterModels: {
        bound_department: null
      },
      filterdata: {},
      activeSearchField: '',
      activeSearchLabel: ''
    }

  },
  computed: {
    interval() {
      return this.$t('download_center.start') + ' - ' + this.$t('download_center.end')
    }
  },
  methods: {
      // 处理过滤变化
    handleFilterChange () {
      this.pagination.page = 1
      this.getSearchList(1)
    },
    handleHeaderDblClick (column) {
      // 排除不需要搜索的列
      if (['detail', 'action'].includes(column.name)) return

      this.activeSearchField = column.field
      this.activeSearchLabel = column.label

      // 弹出搜索对话框
      this.$q
        .dialog({
          title: `搜索${column.label}`,
          message: `请输入${column.label}的搜索条件`,
          prompt: {
            model: '',
            type: 'text'
          },
          cancel: true,
          persistent: true
        })
        .onOk((data) => {
          // 执行搜索
          this.executeColumnSearch(column.field, data)
        })
        .onCancel(() => {
          this.activeSearchField = ''
          this.activeSearchLabel = ''
        })
    },
    // 执行列搜索
    executeColumnSearch (field, value) {
      // 构建搜索参数
      if (
        field === 'type' ||
        field === 'audit_status' ||
        field === 'save_status' ||
        field === 'bound_status'
      ) {
        const searchParams = {
          [field]: value
        }
        // 清除其他搜索条件
        this.filter = ''
        this.date_range = ''

        // 执行搜索
        this.getList({
          ...searchParams,
          page: 1
        })

        // 重置激活的搜索字段
        this.activeSearchField = ''
        this.activeSearchLabel = ''
      } else {
        const searchParams = {
          [field + '__icontains']: value
        }
        // 清除其他搜索条件
        this.filter = ''
        this.date_range = ''

        // 执行搜索
        this.getList({
          ...searchParams,
          page: 1
        })
        this.filterdata = searchParams
        this.$q.notify({
          message: `已搜索 ${this.activeSearchLabel} 含有 "${value}" 的结果`,
          icon: 'search',
          color: 'positive'
        })

        // // 重置激活的搜索字段
        this.activeSearchField = ''
        this.activeSearchLabel = ''
      }
    },
    getList (params = {}) {
      var _this = this
      _this.loading = true
      // 合并基础参数
      const baseParams = {
        page: _this.current,
        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)
    },

    // 带搜索条件加载
    getSearchList (page = 1) {
      this.current = page
      this.paginationIpt = page

      // 构建过滤参数
      const filterParams = {}
      for (const [key, value] of Object.entries(this.filterModels)) {
        if (value !== null && value !== '') {
          filterParams[key] = value
        }
      }
      this.getList({
        number__icontains: this.filter,
        document_date__range: this.date_range,
        ...filterParams ,// 添加过滤条件
        ...this.filterdata, // 添加其他过滤条件
      })
    },

    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.filterdata = {}
      this.filterModels = {
        bound_department: null
      }
      _this.getSearchList()
    },


    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('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'
    }
  },
  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'
    }
  },
  updated() { },
  destroyed() { },
  // 在 watch 或方法中添加调试代码
  watch: {
    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);
}
</style>