Cold_erp_web/src/views/storehouse/InventoryStatistics.vue

<script setup lang="ts">
import {
  Storehouse_Stock_List,
  Storehouse_Depot_List,
  Storehouse_ProductClass_List,
  Storehouse_Product_Model_List,
  Storehouse_Product_Name_List,
  Storehouse_Stock_Detail_List,
  Storehouse_Stock_Detail_Excel
} from '@/api/storehouse/index'
import { ref, reactive, onMounted } from 'vue'
import { List } from '@element-plus/icons-vue'
import Drawer from '@/components/Drawer/index.vue'
import { GlobalStore } from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { dayJs } from '@/utils/common'
import ImageCom from '@/components/Image/index.vue'
import { useTablePublic } from '@/hooks/useTablePublic'

const userInfo = ref({
  Id: '',
  T_name: ''
})
const loading = ref(false)
const globalStore = GlobalStore()
const DrawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const TableDetailRef = ref<InstanceType<typeof TableBase> | null>(null)
const { tableRowClassName } = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_depot_id: '',
  T_product_class: '',
  T_product_name: '',
  T_product_model: ''
})
const detailInitParam = reactive({
  T_depot_id: '',
  T_product_id: '',
  T_start_date: '',
  T_end_date: ''
})
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_depot_name', label: '仓库名称' },
  { 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: 80, fixed: 'right' }
]

const detailColumns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_product_name', label: '产品名称' },
  { prop: 'T_product_model', label: '产品型号', ellipsis: true },
  { prop: 'T_product_spec', label: '产品规格' },
  { prop: 'T_month', label: '月份' },
  { prop: 'T_beginning', label: '期初库存' },
  { prop: 'T_in', label: '入库' },
  { prop: 'T_out', label: '出库' },
  { prop: 'T_ending', label: '期末库存' }
]

const searchHandle = () => {
  TableRef.value?.searchTable()
}
const dataCallback = (res: any) => {
  return res.Data.Data.map((item: any) => {
    if (item.T_depot_id === userInfo.value.Id) {
      item.T_depot_name = userInfo.value.T_name
    }
    return item
  })
}
const detailDataCallback = (res: any) => res.Data
/**
 * 导出表格
 */
const T_date = ref<string[]>([]) // 作为初始值
const T_date_detail = ref<string[]>([])
const T_date_export = ref<string[]>([])
const visible = ref(false)
const exportExcel = () => (visible.value = true)
const confirmExpor = async (project_id?: string) => {
  const params = {
    User_tokey: globalStore.GET_User_tokey,
    T_depot_id: initParam.T_depot_id,
    T_start_date: T_date.value[0],
    T_end_date: T_date.value[1],
    T_product_id: ''
  }
  if (typeof project_id === 'number') {
    params['T_product_id'] = project_id
  }
  const res: any = await Storehouse_Stock_Detail_Excel(params)
  if (res.Code === 200) {
    window.open(res.Data)
  }
}
const NameOptions = ref<any[]>([])
const classOptions = ref<any[]>([])
const modelOptions = ref<any[]>([])
// 获取产品分类
const getProductClassList = async () => {
  const res: any = await Storehouse_ProductClass_List({ page: 1, page_z: 999 })
  classOptions.value = res.Data.Data
}
/**
 * 模糊搜索名称
 * @param str 名称字符串
 */
const getNameAsync = async (str: string): Promise<any> => {
  const res: any = await Storehouse_Product_Name_List({ T_name: str, T_class: initParam.T_product_class })
  if (!res.Data) return
  return res.Data.map((item: any, index: number) => {
    return {
      value: item,
      index: index
    }
  })
}
/**
 * 模糊搜索名称
 * @param queryString 输入框的输入字符
 */
const querySearchAsync = async (queryString: string) => {
  if (queryString) {
    loading.value = true
    globalStore.SET_isloading(true)
    const results = await getNameAsync(queryString)
    NameOptions.value = results
    globalStore.SET_isloading(false)
    loading.value = false
  }
}
/**
 * 异步获取产品型号
 */
const getProductModelList = async () => {
  globalStore.SET_isloading(true)
  const res: any = await Storehouse_Product_Model_List({ T_name: initParam.T_product_name })
  modelOptions.value = res.Data.map((item: any, index: number) => {
    return {
      value: item,
      index: index
    }
  })
  globalStore.SET_isloading(false)
}
const handleSelect = (item: any) => {
  initParam.T_product_name = item.value
  getProductModelList()
}

// 明细
const callbackDrawer = (done: () => void) => done()
const previewDetail = (id: string) => {
  DrawerRef.value?.openDrawer()
  T_date_detail.value = [...T_date.value]
  if (detailInitParam.T_product_id === id) return
  detailInitParam.T_depot_id = initParam.T_depot_id
  detailInitParam.T_product_id = id
  detailInitParam.T_start_date = T_date.value[0]
  detailInitParam.T_end_date = T_date.value[1]
  TableDetailRef.value?.searchTable()
}
const dateDetailChange = (str: string[]) => {
  if (!str) return
  detailInitParam.T_start_date = str[0]
  detailInitParam.T_end_date = str[1]
  TableDetailRef.value?.searchTable()
}
onMounted(() => {
  getProductClassList()

  T_date.value = [dayJs().startOf('year').format('YYYY-MM-DD'), dayJs().format('YYYY-MM-DD')]
  T_date_export.value = [...T_date.value]
})

const getSalaryParams = (row: any) => {
  userInfo.value.Id = ''
  setTimeout(() => {
    userInfo.value = { ...row }
    initParam.T_depot_id = userInfo.value.Id
  }, 100)
}
</script>

<template>
  <div class="inventory-statistics">
    <div style="width: 290px" class="inventory-table">
      <TableBase
        ref="TableRef"
        :columns="[{ prop: 'T_name', label: '仓库名称' }]"
        :requestApi="Storehouse_Depot_List"
        :initParam="{ User_tokey: globalStore.GET_User_tokey }"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle"
      >
        <template #table-header>
          <h3 class="title">仓库列表</h3>
        </template>
      </TableBase>
    </div>
    <transition
      leave-active-class="animate__animated animate__fadeOutRight"
      enter-active-class="animate__animated animate__fadeInLeft"
    >
      <div class="project-container" v-if="userInfo.Id">
        <TableBase
          ref="TableRef"
          :columns="columns"
          :requestApi="Storehouse_Stock_List"
          :initParam="initParam"
          :dataCallback="dataCallback"
        >
          <template #table-header>
            <div class="head-search active">
              <el-form :model="initParam" class="result-form" label-width="100px">
                <el-row>
                  <el-col :span="12"
                    ><el-form-item label="产品分类" :inline-message="true">
                      <el-select v-model="initParam.T_product_class" clearable placeholder="请选择分类~" class="w-50">
                        <el-option v-for="item in classOptions" :key="item.Id" :label="item.T_name" :value="item.Id" />
                      </el-select> </el-form-item
                  ></el-col>
                  <el-col :span="12"
                    ><el-form-item label="产品名称">
                      <el-select
                        v-model="initParam.T_product_name"
                        filterable
                        clearable
                        remote
                        reserve-keyword
                        placeholder="按产品名称搜索"
                        remote-show-suffix
                        :remote-method="querySearchAsync"
                        :loading="loading"
                        @change="handleSelect"
                      >
                        <el-option
                          v-for="item in NameOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value"
                        />
                      </el-select> </el-form-item
                  ></el-col>
                </el-row>
                <el-row class="search-bottom">
                  <el-col :span="12">
                    <el-form-item label="产品型号">
                      <el-select v-model="initParam.T_product_model" clearable placeholder="请选择型号~" class="w-50">
                        <el-option
                          v-for="item in modelOptions"
                          :key="item.index"
                          :label="item.value"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" :offset="6">
                    <el-button type="primary" @click="searchHandle">搜索</el-button>
                    <el-popover :visible="visible" placement="bottom" :width="400" trigger="click">
                      <template #reference>
                        <el-button type="success" @click="exportExcel">导出</el-button>
                      </template>
                      <el-date-picker
                        v-model="T_date_export"
                        type="daterange"
                        range-separator="~"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                      />
                      <div class="export-popover">
                        <el-button size="small" @click="visible = false">取消</el-button>
                        <el-button size="small" type="primary" @click="confirmExpor">确认</el-button>
                      </div>
                    </el-popover>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </template>
          <template #T_product_img="{ row }">
            <ImageCom :src="row.T_product_img" />
          </template>
          <template #right="{ row }">
            <el-button link type="primary" size="small" :icon="List" @click="previewDetail(row.T_product_id)"
              >明细</el-button
            >
          </template>
        </TableBase>
      </div>
    </transition>

    <Drawer ref="DrawerRef" :handleClose="callbackDrawer" size="80%">
      <template #header="{ params }">
        <h4 :id="params.titleId" :class="params.titleClass">库存明细</h4>
      </template>
      <TableBase
        border
        ref="TableDetailRef"
        :pagination="false"
        :columns="detailColumns"
        :requestApi="Storehouse_Stock_Detail_List"
        :initParam="detailInitParam"
        :dataCallback="detailDataCallback"
      >
        <template #table-header>
          <el-row class="head-search">
            <el-col :span="12"
              ><el-form-item label="日期范围">
                <el-date-picker
                  v-model="T_date_detail"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="dateDetailChange" /></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-button type="success" @click="confirmExpor(detailInitParam.T_product_id)">导出</el-button>
            </el-col>
          </el-row>
        </template>
      </TableBase>
    </Drawer>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';
.export-popover {
  padding: 5px;
  display: flex;
  justify-content: center;
}
:deep(.drawer__content) {
  @include f-direction;
}
:deep(.el-drawer__header) {
  margin-bottom: 0;
}
.inventory-statistics {
  height: 100%;
  display: flex;
  overflow: hidden;
  .title {
    width: 100%;
    text-align: center;
    line-height: 1.7em;
    font-size: 20px;
    color: #707b84;
  }
  :deep(.table-header),
  :deep(.card) {
    margin: 0;
    border-radius: 8px;
  }
  .inventory-table {
    @include f-direction;
    z-index: 1;
  }
  .project-container {
    @include f-direction;
    z-index: 0;
    margin-left: 12px;
    width: calc(100% - 290px);
  }
  .head-search {
    width: 100%;
    height: 33px;
    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: 85px;
  }
  .w-50 {
    flex: 0 0 50%;
  }
}
</style>