web/src/views/inventory/inventory.vue

<template>
  <div class="container-wrapper">
    <div class="top">
      <div class="search">
        <el-date-picker
            v-model="selectedDate"
            type="daterange"
            range-separator="-"
            @change="handleDateChange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />

      </div>
      <div class="other-btn">
        <el-dropdown>
          <el-button type="primary" :icon="Plus" @click="openAdd">新增采购</el-button>
        </el-dropdown>
      </div>

    </div>
    <div class="content_list">
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%" @row-click="open_edit">
          <el-table-column fixed label="进货单号" width="250" show-overflow-tooltip>
            <template #default="scope">
              <div class="link">{{ scope.row.code }}</div>
            </template>
          </el-table-column>
          <el-table-column label="品种" prop="kindCount" width="100">

          </el-table-column>
          <el-table-column label="入库金额" width="200">
            <template #default="scope">
              ￥{{ scope.row.totalPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="采购人" prop="managerUserName" width="100"></el-table-column>
          <el-table-column label="供应商" prop="supplierName"></el-table-column>
          <el-table-column prop="purchaseDate" label="采购时间">
            <template #default="scope">
              {{ formatDate(scope.row.purchaseDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="createDatetime" label="创建时间">
            <template #default="scope">
              {{ formatDate(scope.row.createDatetime) }}
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
    <AddOrder ref="addOrderRef" @close="closeAddOrder"/>
    <EditOrder ref="editOrderRef" @close="closeEditOrder" @updateOrderDetail="init"/>
  </div>
</template>

<script lang="ts" setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {post} from "@/utils/request.ts";
import {useRoute} from "vue-router";
import AddOrder from "@/components/inventory/purchase/AddOrder.vue";
import Mask from "@/components/common/Mask.vue";
import EditOrder from "@/components/inventory/purchase/EditOrder.vue";
import {Plus} from "@element-plus/icons-vue";
import {formatDateArray, getEndOfDay} from "@/utils/dateUtils.ts";

let tableData = ref([])
let is_edit = ref(false)
const route = useRoute()
let open_code = ref(null)
onMounted(() => {
  init()
})
const addOrderRef = ref<any>('')
const openAdd = () => {
  nextTick(() => {
    addOrderRef.value.init()
  })
}
const editOrderRef = ref<any>('')
let open_edit = (row: any) => {
  nextTick(() => {
    editOrderRef.value.init(row.code)
  })
}


let init = () => {
  const query = {
    page: page.value,
    pageSize: 20,
  }
  post("inventory/order/list", {query: query}).then((res: any) => {
    tableData.value = res.list
    total.value = res.total_count
  })

}
const closeAddOrder = () => {
  init()
}
const closeEditOrder = () => {
  open_code.value = null
  is_edit.value = false
  init()
}
//分页
let pageSize = ref(20)
let total = ref(0)
let page = ref(1)
let changePage = (value: number) => {
  page.value = value
  init()
}
// 转成YYYY-MM-DD格式
const formatDate = (isoStr: any) => {
  const date = new Date(isoStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}

const selectedDate = ref<any>([])
const handleDateChange = (date: any[]) => {
  selectedDate.value = formatDateArray(date)
  if (selectedDate.value[0] == selectedDate.value[1]) {
    selectedDate.value[1] = getEndOfDay(selectedDate.value[1]); // 输出今天 23:59
  }
}

</script>
<style scoped lang="scss">
@use "@/assets/scss/base.scss";

.container-wrapper {
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  .content_list {
    width: 100%;
    flex: 1;
    overflow: hidden;
    margin-top: base.$margin-base;
  }

  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.full_screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;

  .content {
    width: 1200px;
    height: 800px;
    background-color: #FFF;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    padding: 20px;
  }
}

.link {
  color: #409EFF;
  cursor: pointer;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;

  .content_list {
    flex: 1;
  }

  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #EEE;

    .page_btn_list {
      position: absolute;
      left: 0;
      top: 10px;
    }
  }

}
</style>