baozhida_erp/src/views/storehouse/inventory/InStorage.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { GlobalStore } from '@/stores/index'
import Dialog from '@/components/dialog/Dialog.vue'
import TableBase from '@/components/TableBase/index.vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_StockIn_List, Storehouse_Depot_List } from '@/api/storehouse/index'
import { View } from '@element-plus/icons-vue'
import InStorageForm from './InStorageForm.vue'

const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '入库单号' },
  { prop: 'T_submit_name', label: '经办人' },
  { prop: 'T_depot_name', label: '入库仓库' },
  { prop: 'T_date', label: '入库日期' },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]

// 查看图片
const url = ref('')
const srcList = ref<any[]>([])
const dialog = ref<InstanceType<typeof Dialog> | null>(null)
const previewImg = (str: string) => {
  dialog.value?.DialogOpen()
  url.value = str
  srcList.value.push(str)
}

// 搜索
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_date: '',
  T_state: ''
})
const searchHandle = () => {
  console.log(initParam)

  // TableRef.value?.searchTable()
}

// 拿到仓库列表
const options = ref()
const getDepotList = async () => {
  const res: any = await Storehouse_Depot_List({ User_tokey: globalStore.GET_User_tokey, page: 1, page_z: 999 })
  options.value = res.Data.Data
}
onMounted(() => {
  getDepotList()
})
</script>

<template>
  <div class="InStorage">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_StockIn_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="7" :lg="9" :md="11">
              <span class="inline-flex items-center">入库日期：</span>
              <el-date-picker
                v-model="initParam.T_date"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                class="w-50 m-2"
              />
            </el-col>
            <el-col :xl="14" :lg="12" :md="11">
              <span class="inline-flex items-center">仓库：</span>
              <el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择仓库~">
                <el-option v-for="item in options" :key="item.T_State" :label="item.T_name" :value="item.T_State" />
              </el-select>
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
            <el-col :xl="3" :lg="3" :md="4" class="btn"><el-button type="primary">入库</el-button></el-col>
          </el-row>
        </div>
      </template>
      <template #T_State="{ row }">
        <el-tag v-if="row.T_State === 1" type="success" effect="dark"> 已出库 </el-tag>
        <el-tag v-else type="danger" effect="dark"> 未出库 </el-tag>
      </template>
      <template #T_product_img="{ row }">
        <el-image
          v-if="row.T_product_img"
          style="height: 50px"
          :src="row.T_product_img"
          fit="cover"
          @click="previewImg(row.T_product_img)"
        />
      </template>
      <template #right="{ row }">
        <el-button link type="success" size="small" :icon="View">详情</el-button>
      </template>
    </TableBase>
    <Dialog ref="dialog" width="50%">
      <el-image :src="url" :zoom-rate="1.2" :preview-src-list="srcList" fit="cover" />
    </Dialog>
    <InStorageForm />
  </div>
</template>

<style scoped lang="scss">
.InStorage {
  .input-suffix {
    width: 100%;
    .inline-flex {
      white-space: nowrap;
    }
    .w-50 {
      width: 12.5rem;
    }
    .btn {
      .el-button {
        padding: 0 20px;
      }
    }
  }
}
</style>