kyj-yanglao-web-new/src/views/warehouses/materialsOut/index.vue

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-card shadow="never">
      <el-form :model="queryParams" inline>
        <TenantSelect v-model="queryParams.tenantIds" placeholder="请选择机构名称" prop="tenantIds" />

        <el-form-item label="出库状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择出库状态" clearable class="!w-160px">
            <el-option
              v-for="(item, index) in getStrDictOptions(DICT_TYPE.MATERIALS_TYPE_NANSHA)"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出库日期" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :unlink-panels="true"
          />
        </el-form-item>
        <el-form-item label="出库单号" prop="orderNo">
          <el-input v-model="queryParams.orderNo" placeholder="请输入出库单号" clearable class="!w-240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮和表格 -->
    <el-card shadow="never" class="mt-4">
      <div class="mb-4">
        <el-button v-hasPermi="['warehouses:materialsOut:add']" type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
        <el-button v-hasPermi="['warehouses:materialsOut:import']" type="success" @click="openImport"><Icon icon="ep:download" class="mr-5px" />导入</el-button>
        <el-button v-hasPermi="['warehouses:materialsOut:export']" type="primary" plain @click="openBatchExport"><Icon icon="ep:upload" class="mr-5px" />批量导出</el-button>
      </div>

      <el-table :data="tableData" v-loading="loading" :header-cell-style="tableHeaderColor">
        <el-table-column prop="orderNo" label="出库单号" align="center" width="280" />
        <el-table-column prop="orderDate" label="出库日期" align="center" width="120" />
        <el-table-column prop="status" label="出库状态" align="center" width="110">
          <template #default="{ row }">
            <el-tag :type="getStrDictOptions(DICT_TYPE.MATERIALS_TYPE_NANSHA)?.find(item => item.value == row.status)?.colorType || 'info'">{{ getStrDictOptions(DICT_TYPE.MATERIALS_TYPE_NANSHA)?.find(item => item.value == row.status)?.label || '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="outDeptName" label="领用部门" align="center" width="140" />
        <el-table-column prop="outUser" label="领用人" align="center" width="120" />
        <el-table-column prop="outReason" label="出库原因" align="center" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
            <el-button v-hasPermi="['warehouses:materialsOut:edit']" link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button v-hasPermi="['warehouses:materialsOut:export']" link type="success" @click="handleExport(row)">导出</el-button>
            <el-button v-hasPermi="['warehouses:materialsOut:print']" link type="primary" @click="handlePrint(row)">打印</el-button>
            <el-button v-hasPermi="['warehouses:materialsOut:delete']" link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4"
        :current-page="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <MaterialsOutDialog
      v-model="dialogVisible"
      :mode="dialogMode"
      :form-data="form"
      :department-options="departmentOptions"
      :material-options="materialOptions"
      @refresh="getTableData"
    />
    <Print ref="printRef" />
    <!-- 导入弹窗（复用 system/user 的 ImportFile 组件） -->
    <Import ref="importRef" :config="importConfig" @success="handleImportSuccess" />

    <!-- 批量导出弹窗 -->
    <el-dialog v-model="batchExportVisible" title="批量导出" width="460px" append-to-body>
      <el-form label-width="90px">
        <el-form-item label="导出日期">
          <el-date-picker
            v-model="batchExportRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :unlink-panels="true"
            class="!w-full"
          />
        </el-form-item>
      </el-form>
      <div class="text-12px text-gray-500">
        默认导出本月数据，导出所选日期范围内的出库单明细（一条物资一行）。
      </div>
      <template #footer>
        <el-button @click="batchExportVisible = false">取消</el-button>
        <el-button type="primary" :loading="batchExportLoading" @click="handleBatchExport">导出</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { materialIoPage, materialIoInboundBatchList, getMaterialOutboundDetail, materialIoDelete, exportMaterialOutbound } from '@/api/material/stockInAndOut'
import { handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import download from '@/utils/download'
import Import from '@/components/ImportFile/index.vue'
import { exportMaterialsOutBatch } from '../batchExportSheet'


const MaterialsOutDialog = defineAsyncComponent(() => import('./components/MaterialsOutDialog.vue'))
const Print = defineAsyncComponent(() => import('./components/Print.vue'))
const userStore = useUserStore()

const tableHeaderColor = () => {
  return {
    background: '#F5F7FA',
    color: '#606266',
    fontWeight: '600',
  }
}

// 搜索
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  tenantIds: userStore.orgTenantId,
  status: '',
  dateRange: [new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split('T')[0], new Date().toISOString().split('T')[0]],
  orderNo: '',
})

const total = ref(0)
// 部门下拉
const departmentOptions = ref([])
// 出库物资
const materialOptions = ref([])
// 表格
const tableData = ref([])
const loading = ref(false)
// 弹窗
const dialogVisible = ref(false)
const dialogMode = ref('add')
const printRef = ref(null)
const initialForm = {
  id: null,
  bizType: 'OUT',
  orderDate: new Date().toISOString().split('T')[0],
  outDept:'',
  outDeptId:null,
  outUser:'',
  outReason:'',
  remark: '',
  auditResult: '',
  auditor: '',
  auditTime: '',
  auditRemark: '',
  items: [],
}

const form = reactive({ ...initialForm })

// 导入（复用 ImportFile 组件）
const importRef = ref()
const importConfig = reactive({
  title: '物资出库导入',
  // TODO: 替换成你的真实导入接口
  importUrl: '/material-io/outbound/import',
  excelTempName: '物资出库导入模板',
  // TODO: 替换成你的真实模板下载接口
  downloadUrl: '/material-io/outbound/import-template',
  desc: '物资出库',
  // TODO: 如果后端支持失败信息导出，填真实接口；不支持可留空
  failExportUrl: '',
})

const openImport = () => {
  importRef.value?.open?.()
}

const handleImportSuccess = () => {
  // 导入成功后刷新列表
  getTableData()
}

const getMaterialIoInboundBatchList = async()=>{
  try {
    const res = await materialIoInboundBatchList({ 
      tenantId: queryParams.tenantIds && queryParams.tenantIds.length ? queryParams.tenantIds[0] : undefined
    })
    materialOptions.value = res || []
  } catch (e) {
    console.error(e)
    ElMessage.error(e?.message || '获取入库单(批次)列表失败')
  }
}

// 获取表格数据（分页接口，bizType=OUT）
const getTableData = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize,
      tenantIds: queryParams.tenantIds?.length ? queryParams.tenantIds : undefined,
      bizType: 'OUT',
      status: queryParams.status === '' ? undefined : queryParams.status,
      orderNo: queryParams.orderNo || undefined,
      orderDate:
        Array.isArray(queryParams.dateRange) && queryParams.dateRange.length === 2
          ? queryParams.dateRange
          : undefined,
    }
    const res = await materialIoPage(params)
    tableData.value = res.list || []
    total.value = res.total || 0
  } catch (e) {
    console.error(e)
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getTableData()
})

const handleSearch = () => {
  queryParams.pageNo = 1
  getTableData()
}

const handleReset = () => {
  queryParams.status = ''
  queryParams.dateRange = [new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split('T')[0], new Date().toISOString().split('T')[0]]
  queryParams.orderNo = ''
  queryParams.tenantIds = userStore.orgTenantId
  queryParams.pageNo = 1
  getTableData()
}

const handleSizeChange = (size) => {
  queryParams.pageSize = size
  getTableData()
}

const handleCurrentChange = (page) => {
  queryParams.pageNo = page
  getTableData()
}

const handleAdd = async () => {
  // 只能选择一个机构
  if(queryParams.tenantIds.length == 0 || queryParams.tenantIds.length > 1){
    ElMessage.error('新增只能选择一个机构')
    return
  }
  getMaterialIoInboundBatchList()
  departmentOptions.value = handleTree(await DeptApi.getSimpleDeptList())
  dialogMode.value = 'add'
  Object.assign(form, { ...initialForm, orderDate: new Date().toISOString().split('T')[0], items: [], tenantId:queryParams.tenantIds ? queryParams.tenantIds[0] : undefined })
  dialogVisible.value = true
}

const handleView = async(row) => {
  dialogMode.value = 'view'
  try {
    const res = await getMaterialOutboundDetail(row.id)
    const data = res || {}
    const params = {
      id: data.id || undefined,
      bizType: 'OUT',
      orderDate: data.orderDate,
      outDept: data.outDept || undefined,
      outUser: data.outUser || undefined,
      outReason: data.outReason || undefined,
      outDept: data.outDeptName || undefined,
      outDeptId: data.outDeptId,
      remark: data.remark || undefined,
      tenantId: data.tenantId,
      orderNo: data.orderNo,
      items: (data.items || []).map(item => {
        return {
          ...item,
          inUnitPrice: item.inUnitPrice || 0,
        }
      }),
      auditResult: data.auditResult || undefined,
      auditor: data.auditor || undefined,
      auditTime: data.auditTime || undefined,
      auditRemark: data.auditRemark || undefined,
    }
    Object.assign(form, JSON.parse(JSON.stringify(params || {})))
    dialogVisible.value = true
  } catch (e) {
    console.error(e)
    ElMessage.error(e?.message || '获取详情失败')
  }
  dialogVisible.value = true
}

const handleEdit = async(row) => {
  // 只能选择一个机构
  if(queryParams.tenantIds.length == 0 || queryParams.tenantIds.length > 1){
    ElMessage.error('编辑只能选择一个机构')
    return
  }
  getMaterialIoInboundBatchList()
  departmentOptions.value = handleTree(await DeptApi.getSimpleDeptList())
  dialogMode.value = 'edit'
  try {
    const res = await getMaterialOutboundDetail(row.id)
    const data = res || {}
    const params = {
      id: data.id || undefined,
      bizType: 'OUT',
      orderDate: data.orderDate,
      outDept: data.outDeptName || undefined,
      outDeptId: data.outDeptId,
      outUser: data.outUser || undefined,
      outReason: data.outReason || undefined,
      remark: data.remark || undefined,
      tenantId: data.tenantId,
      orderNo: data.orderNo,
      items: (data.items || []).map(item => {
        return {
          ...item,
          inboundItemId:item.refInboundItemId,
          availableQty: item.latestAvailableQty || 0,
          inUnitPrice: item.inUnitPrice || 0,
        }
      }),
    }
    Object.assign(form, JSON.parse(JSON.stringify(params || {})))
    console.log(form)
    dialogVisible.value = true
  } catch (e) {
    console.error(e)
    ElMessage.error(e?.message || '获取详情失败')
  }
  dialogVisible.value = true
}

const handleExport = async(row) => {
  try {
    const res = await exportMaterialOutbound(row.id)
    download.excel(res, '出库单据明细.xls')
  } catch (e) {
    console.error(e)
    ElMessage.error(e?.message || '导出失败')
  }
}

/** 导出日期转字符串 */
const formatDateStr = (date) => {
  const y = date.getFullYear()
  const m = String(date.getMonth() + 1).padStart(2, '0')
  const d = String(date.getDate()).padStart(2, '0')
  return `${y}-${m}-${d}`
}

/** 默认导出本月：本月 1 号 ~ 今天 */
const currentMonthRange = () => {
  const now = new Date()
  return [`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`, formatDateStr(now)]
}

// 批量导出
const BATCH_EXPORT_PAGE_SIZE = 10000
const batchExportVisible = ref(false)
const batchExportLoading = ref(false)
const batchExportRange = ref(currentMonthRange())

const openBatchExport = () => {
  batchExportRange.value = currentMonthRange()
  batchExportVisible.value = true
}

/** 按导出日期拉取出库单（pageSize 取大值，并按 total 兜底翻页） */
const fetchOutboundOrders = async (orderDate) => {
  const all = []
  let pageNo = 1
  let total = 0
  while (pageNo <= 50) {
    const res = await materialIoPage({
      pageNo,
      pageSize: BATCH_EXPORT_PAGE_SIZE,
      tenantIds: queryParams.tenantIds?.length ? queryParams.tenantIds : undefined,
      bizType: 'OUT',
      orderDate,
    })
    const list = res?.list || []
    all.push(...list)
    total = res?.total || 0
    // 已取完（或后端单页有上限时继续翻页）
    if (!list.length || list.length < BATCH_EXPORT_PAGE_SIZE || all.length >= total) break
    pageNo++
  }
  return all
}

/** 列表未返回明细时，按单号补查详情 */
const fetchOrderItems = async (orders) => {
  const itemsMap = new Map()
  const needIds = orders.filter((order) => !(order.items || []).length && order.id).map((order) => order.id)
  const CHUNK_SIZE = 5
  let failed = false
  for (let i = 0; i < needIds.length; i += CHUNK_SIZE) {
    if (failed) break
    const chunk = needIds.slice(i, i + CHUNK_SIZE)
    const details = await Promise.all(
      chunk.map(async (id) => {
        try {
          return await getMaterialOutboundDetail(id)
        } catch {
          failed = true
          return null
        }
      })
    )
    chunk.forEach((id, index) => itemsMap.set(id, details[index]?.items || []))
  }
  return itemsMap
}

/** 批量导出 */
const handleBatchExport = async () => {
  const range = batchExportRange.value
  if (!range || range.length !== 2) {
    ElMessage.warning('请选择导出日期')
    return
  }
  batchExportLoading.value = true
  try {
    const orders = await fetchOutboundOrders(range)
    if (!orders.length) {
      ElMessage.warning('所选日期范围内没有出库单数据')
      return
    }
    const itemsMap = await fetchOrderItems(orders)
    const rows = []
    orders.forEach((order) => {
      const items = (order.items || []).length ? order.items : itemsMap.get(order.id) || []
      items.forEach((item) => {
        rows.push({
          orderNo: order.orderNo,
          orderDate: order.orderDate,
          outDeptName: order.outDeptName,
          outUser: order.outUser,
          outReason: order.outReason,
          remark: order.remark,
          storeName: item.refInStoreName || item.storeName,
          refInOrderNo: item.refInOrderNo,
          materialNumber: item.materialNumber,
          materialName: item.materialName,
          materialUnit: item.materialUnit,
          produceDate: item.produceDate,
          quantity: item.quantity ?? item.outQty,
          inUnitPrice: item.inUnitPrice,
          saleUnitPrice: item.saleUnitPrice,
          amount: item.amount,
        })
      })
    })
    if (!rows.length) {
      ElMessage.warning('所选日期范围内的出库单没有明细数据')
      return
    }
    exportMaterialsOutBatch(rows, `出库单明细_${range[0]}_${range[1]}`)
    batchExportVisible.value = false
  } catch (e) {
    console.error(e)
    ElMessage.error(e?.message || '导出失败')
  } finally {
    batchExportLoading.value = false
  }
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除入库单号为 "${row.orderNo}" 的入库单吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async() => {
      // 使用materialIoDelete
      await materialIoDelete(row.id)
      ElMessage.success('删除成功')
      getTableData()
    })
    .catch(() => {})
}

const handlePrint = (row) => {
  printRef.value.open(row.id)
}
</script>

<style scoped>
.mt-4 {
  margin-top: 16px;
}
.mb-4 {
  margin-bottom: 16px;
}
</style>