<template> 
 | 
  <div class="app-container"> 
 | 
    <div class="search_form"> 
 | 
      <div> 
 | 
        <span class="search_title">供应商名称:</span> 
 | 
        <el-input 
 | 
          v-model="searchForm.supplierName" 
 | 
          style="width: 240px" 
 | 
          placeholder="请输入" 
 | 
          @change="handleQuery" 
 | 
          clearable 
 | 
          prefix-icon="Search" 
 | 
        /> 
 | 
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px" 
 | 
          >搜索</el-button 
 | 
        > 
 | 
      </div> 
 | 
      <div> 
 | 
        <!-- <el-button type="primary" @click="openForm('add')">新增</el-button> --> 
 | 
        <el-button @click="handleOut">导出</el-button> 
 | 
        <el-button type="danger" plain @click="handleDelete">删除</el-button> 
 | 
      </div> 
 | 
    </div> 
 | 
    <div class="table_list"> 
 | 
      <el-table 
 | 
        :data="tableData" 
 | 
        border 
 | 
        v-loading="tableLoading" 
 | 
        @selection-change="handleSelectionChange" 
 | 
        :expand-row-keys="expandedRowKeys" 
 | 
        :row-key="(row) => row.id" 
 | 
        show-summary 
 | 
        style="width: 100%" 
 | 
        :summary-method="summarizeMainTable" 
 | 
        height="calc(100vh - 18.5em)" 
 | 
        stripe 
 | 
      > 
 | 
        <el-table-column align="center" type="selection" width="55" /> 
 | 
        <el-table-column align="center" label="序号" type="index" width="60" /> 
 | 
        <el-table-column 
 | 
          label="出库日期" 
 | 
          prop="createTime" 
 | 
          min-width="130" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="供应商名称" 
 | 
          prop="supplierName" 
 | 
          width="250" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="产品大类" 
 | 
          prop="productCategory" 
 | 
          width="100" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="规格型号" 
 | 
          prop="specificationModel" 
 | 
          width="100" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="单位" 
 | 
          prop="unit" 
 | 
          width="80" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="出库数量" 
 | 
          prop="inboundNum" 
 | 
          width="100" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="含税单价(元)" 
 | 
          prop="taxInclusiveUnitPrice" 
 | 
          width="200" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="含税总价(元)" 
 | 
          prop="taxInclusiveTotalPrice" 
 | 
          width="200" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="税率(%)" 
 | 
          prop="taxRate" 
 | 
          width="100" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="不含税总价(元)" 
 | 
          prop="taxExclusiveTotalPrice" 
 | 
          width="180" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <el-table-column 
 | 
          label="出库人" 
 | 
          prop="createBy" 
 | 
          width="80" 
 | 
          show-overflow-tooltip 
 | 
        /> 
 | 
        <!-- <el-table-column 
 | 
          fixed="right" 
 | 
          label="操作" 
 | 
          min-width="60" 
 | 
          align="center" 
 | 
        > 
 | 
          <template #default="scope"> 
 | 
            <el-button 
 | 
              link 
 | 
              type="primary" 
 | 
              size="small" 
 | 
              @click="openForm('edit', scope.row)" 
 | 
              >编辑</el-button 
 | 
            > 
 | 
          </template> 
 | 
        </el-table-column> --> 
 | 
      </el-table> 
 | 
      <pagination 
 | 
        v-show="total > 0" 
 | 
        :total="total" 
 | 
        layout="total, sizes, prev, pager, next, jumper" 
 | 
        :page="page.current" 
 | 
        :limit="page.size" 
 | 
        @pagination="paginationChange" 
 | 
      /> 
 | 
    </div> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script setup> 
 | 
import pagination from "@/components/PIMTable/Pagination.vue"; 
 | 
import { ref } from "vue"; 
 | 
import { ElMessageBox } from "element-plus"; 
 | 
import useUserStore from "@/store/modules/user"; 
 | 
import { userListNoPage } from "@/api/system/user.js"; 
 | 
import { 
 | 
  getStockOutPage, 
 | 
  delStockOut, 
 | 
} from "@/api/inventoryManagement/stockOut.js"; 
 | 
  
 | 
const userStore = useUserStore(); 
 | 
const { proxy } = getCurrentInstance(); 
 | 
const tableData = ref([]); 
 | 
const selectedRows = ref([]); 
 | 
const userList = ref([]); 
 | 
const tableLoading = ref(false); 
 | 
const productList = ref([]) 
 | 
const page = reactive({ 
 | 
  current: 1, 
 | 
  size: 100, 
 | 
}); 
 | 
const total = ref(0); 
 | 
const fileList = ref([]); 
 | 
  
 | 
// 用户信息表单弹框数据 
 | 
const operationType = ref(""); 
 | 
const dialogFormVisible = ref(false); 
 | 
const data = reactive({ 
 | 
  searchForm: { 
 | 
    supplierName: "", 
 | 
  }, 
 | 
  form: { 
 | 
    supplierId: null, 
 | 
    supplierName: '', 
 | 
    productId: null, 
 | 
    productName: '', 
 | 
    userId: userStore.userId, 
 | 
    nickname: '', 
 | 
    model: '', 
 | 
    productModelId: null, 
 | 
    unit: '', 
 | 
    productrecordId: null, 
 | 
    taxInclusiveUnitPrice: '', 
 | 
    taxInclusiveTotalPrice: '', 
 | 
    taxRate: '', 
 | 
    taxExclusiveTotalPrice: '', 
 | 
    inboundTime: '', 
 | 
    inboundBatch: '', 
 | 
    inboundQuantity: '' 
 | 
  }, 
 | 
}); 
 | 
const { searchForm } = toRefs(data); 
 | 
  
 | 
// 查询列表 
 | 
/** 搜索按钮操作 */ 
 | 
const handleQuery = () => { 
 | 
  page.current = 1; 
 | 
  getList(); 
 | 
}; 
 | 
const paginationChange = (obj) => { 
 | 
  page.current = obj.page; 
 | 
  page.size = obj.limit; 
 | 
  getList(); 
 | 
}; 
 | 
const getList = () => { 
 | 
  tableLoading.value = true; 
 | 
  getStockOutPage({ ...searchForm.value, ...page }) 
 | 
    .then((res) => { 
 | 
      tableLoading.value = false; 
 | 
      tableData.value = res.data.records; 
 | 
      tableData.value.map((item) => { 
 | 
        item.children = []; 
 | 
      }); 
 | 
      total.value = res.data.total; 
 | 
    }) 
 | 
    .catch(() => { 
 | 
      tableLoading.value = false; 
 | 
    }); 
 | 
}; 
 | 
  
 | 
// 表格选择数据 
 | 
const handleSelectionChange = (selection) => { 
 | 
  // 过滤掉子数据 
 | 
  selectedRows.value = selection.filter((item) => item.id); 
 | 
  console.log("selection", selectedRows.value); 
 | 
}; 
 | 
const expandedRowKeys = ref([]); 
 | 
  
 | 
// 主表合计方法 
 | 
const summarizeMainTable = (param) => { 
 | 
  return proxy.summarizeTable(param, [ 
 | 
    "contractAmount", 
 | 
    "taxInclusiveTotalPrice", 
 | 
    "taxExclusiveTotalPrice", 
 | 
  ]); 
 | 
}; 
 | 
  
 | 
// 导出 
 | 
const handleOut = () => { 
 | 
  ElMessageBox.confirm("是否确认导出?", "导出", { 
 | 
    confirmButtonText: "确认", 
 | 
    cancelButtonText: "取消", 
 | 
    type: "warning", 
 | 
  }) 
 | 
    .then(() => { 
 | 
      proxy.download("/stockmanagement/export", {}, "出库台账.xlsx"); 
 | 
    }) 
 | 
    .catch(() => { 
 | 
      proxy.$modal.msg("已取消"); 
 | 
    }); 
 | 
}; 
 | 
  
 | 
// 删除 
 | 
const handleDelete = () => { 
 | 
  let ids = []; 
 | 
  if (selectedRows.value.length > 0) { 
 | 
    ids = selectedRows.value.map((item) => item.id); 
 | 
  } else { 
 | 
    proxy.$modal.msgWarning("请选择数据"); 
 | 
    return; 
 | 
  } 
 | 
  ElMessageBox.confirm("选中的内容将被删除,是否确认删除?", "导出", { 
 | 
    confirmButtonText: "确认", 
 | 
    cancelButtonText: "取消", 
 | 
    type: "warning", 
 | 
  }) 
 | 
    .then(() => { 
 | 
      delStockOut({ids:ids}).then((res) => { 
 | 
        proxy.$modal.msgSuccess("删除成功"); 
 | 
        getList(); 
 | 
      }); 
 | 
    }) 
 | 
    .catch(() => { 
 | 
      proxy.$modal.msg("已取消"); 
 | 
    }); 
 | 
}; 
 | 
// 获取当前日期并格式化为 YYYY-MM-DD 
 | 
function getCurrentDate() { 
 | 
  const today = new Date(); 
 | 
  const year = today.getFullYear(); 
 | 
  const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始 
 | 
  const day = String(today.getDate()).padStart(2, "0"); 
 | 
  return `${year}-${month}-${day}`; 
 | 
} 
 | 
onMounted(() => { 
 | 
  getList(); 
 | 
}); 
 | 
</script> 
 | 
  
 | 
<style scoped lang="scss"></style> 
 |