baozhida_erp/src/views/storehouse/InventoryStatistics.vue

<script setup lang="ts">
import {
  Storehouse_Stock_List,
  Storehouse_Depot_List,
  Storehouse_Stock_Detail_List,
  Storehouse_Stock_Detail_Excel
} from '@/api/storehouse/index'
import { ref, reactive, nextTick, onMounted } from 'vue'
import { List, Picture, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
import { GlobalStore } from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)

const searchShow = ref(false)
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_depot_id: '',
  T_product_class: '',
  T_product_name: '',
  T_product_model: ''
})
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_iccid', label: '仓库名称', ellipsis: true },
  { prop: 'T_product_img', label: '产品图片', name: 'T_product_img' },
  { prop: 'T_product_name', label: '产品名称' },
  { prop: 'T_product_class_name', label: '产品分类' },
  { prop: 'T_product_model', label: '产品型号', ellipsis: true },
  { prop: 'T_product_spec', label: '产品规格' },
  { prop: 'T_total', label: '库存数量' },
  { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
]

const searchShowHandle = () => {
  searchShow.value = !searchShow.value
}

// 拿到仓库列表
interface ItemType {
  T_name: string
  Id: number
}
const options = ref<ItemType[]>([])
const getDepotList = async () => {
  if (globalStore.GET_depotList.length) return
  const res: any = await Storehouse_Depot_List({ User_tokey: globalStore.GET_User_tokey, page: 1, page_z: 999 })
  options.value = res.Data.Data
  globalStore.SET_depotList(options.value)
}
onMounted(() => {
  getDepotList()
})
</script>

<template>
  <div class="inventory-statistics">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Stock_List" :initParam="initParam">
      <template #table-header>
        <div class="head-search" :class="searchShow ? 'active' : ''">
          <el-form :model="initParam" class="result-form" label-width="100px">
            <el-row>
              <el-col :span="6"
                ><el-form-item label="产品分类" :inline-message="true"> <el-input /> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item label="产品名称"> <el-input /> </el-form-item
              ></el-col>
              <el-col :span="6"
                ><el-form-item label="产品型号"> <el-input /> </el-form-item
              ></el-col>
              <el-col :span="6">
                <el-button :icon="ArrowDownBold" @click="searchShowHandle" />
                <el-button type="primary">搜索</el-button>
                <el-button type="success">导出</el-button>
              </el-col>
            </el-row>
            <el-row class="search-bottom">
              <el-col :span="6"
                ><el-form-item label="仓库列表" :inline-message="true"> <el-input /> </el-form-item
              ></el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <template #T_product_img="{ row }">
        <el-image
          fit="cover"
          style="width: 50px; height: 50px"
          :src="row.T_product_img"
          :preview-src-list="[row.T_product_img]"
          :preview-teleported="true"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
      <template #right="{ row }">
        <el-button link type="primary" size="small" :icon="List">明细</el-button>
      </template>
    </TableBase>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';
.inventory-statistics {
  @include f-direction;
  .head-search {
    width: 100%;
    height: 32px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    .result-form.el-form .el-form-item {
      margin-bottom: 0 !important;
    }
    .search-bottom {
      margin-top: 18px;
    }
  }
  .head-search.active {
    height: 82px;
  }
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
  }
  .image-slot .el-icon {
    font-size: 30px;
  }
}
</style>