art-design/src/views/crmpc/stocking/stocking_list.vue

<template>
  <div class="stocking-page">
    <div class="stocking-toolbar boxshadow">
      <div class="toolbar-left">
        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
      </div>
      <div class="toolbar-right">
        <el-input
          v-model="keyword"
          placeholder="请输入客户名称"
          clearable
          style="width: 260px"
          @keyup.enter="getList"
        >
          <template #suffix>
            <el-icon class="clickable" @click="getList"><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <div class="boxshadow">
      <ArtTable
        ref="tableRef"
        row-key="id"
        :loading="loading"
        :data="tableData"
        :currentPage="pagination.currentPage"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #default>
          <ElTableColumn label="备货单编号" prop="stock_no" min-width="140" />
          <ElTableColumn label="阿里订单号/PN号" prop="order_no" min-width="160" />
          <ElTableColumn label="客户名称" prop="customer_name" min-width="120" />
          <ElTableColumn label="客户来源" prop="customer_source" min-width="120" />
          <ElTableColumn label="业务员" prop="salesman" min-width="100" />
          <ElTableColumn label="日期" prop="date" min-width="120" />
          <ElTableColumn label="补充" prop="remark" min-width="160" />
          <ElTableColumn label="状态" prop="status" width="120">
            <template #default="scope">
              <ElTag type="success">备货完成</ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" fixed="right" min-width="220" align="center">
            <template #default="scope">
              <ElRow :gutter="10" justify="center">
                <el-button link type="primary" @click="handleView(scope.row)">查看备货单</el-button>
                <el-button link type="primary" @click="handleCreateRepair(scope.row)"
                  >创建终版备货单</el-button
                >
                <el-button link type="primary" @click="handleView1(scope.row)"
                  >查看终版备货单</el-button
                >
              </ElRow>
            </template>
          </ElTableColumn>
        </template>
      </ArtTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { router } from '@/router'

  const loading = ref(false)
  const keyword = ref('')
  const tableRef = ref()
  const tableData = ref<any[]>([])
  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })

  onMounted(() => {
    getList()
  })

  watch([keyword], () => {
    pagination.currentPage = 1
    // 不自动请求，保持与截图行为一致，点击搜索或回车触发
  })

  const getList = async () => {
    loading.value = true
    try {
      // 这里先使用本地假数据占位，等后端接口确定后再切换为真实请求
      const mock = Array.from({ length: 8 }).map((_, i) => ({
        id: i + 1,
        stock_no: `HSAT-JN00${(i + 10).toString().padStart(2, '0')}`,
        order_no: 'VCS28762JN2',
        customer_name: 'Alicia',
        customer_source: '广交会',
        salesman: '王玉凯',
        date: '2025-08-27',
        remark: 'XXXXXXXXXXXX',
        status: 1,
      }))
      tableData.value = mock
      pagination.total = 24
    } finally {
      loading.value = false
    }
  }

  const handleSizeChange = (size: number) => {
    pagination.pageSize = size
    getList()
  }
  const handleCurrentChange = (page: number) => {
    pagination.currentPage = page
    getList()
  }

  const handleCreate = () => {
    // TODO: 跳转到创建备货单页面
    router.push('/crmpc/stocking/Add')
  }
  const handleView = (row: any) => {
    router.push('/crmpc/stocking/show')
    // TODO: 跳转或弹窗查看备货单
  }
  const handleView1 = (row: any) => {
    router.push('/crmpc/stocking/final_show')
    // TODO: 跳转或弹窗查看备货单
  }
  const handleCreateRepair = (row: any) => {
    router.push('/crmpc/stocking/final_add')
    // TODO: 跳转创建维修保单
  }
</script>

<style scoped lang="scss">
  .stocking-page {
    background: var(--art-main-bg-color);
    min-height: 100vh;
  }
  .stocking-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--art-main-bg-color);
  }
  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .toolbar-right {
    display: flex;
    align-items: center;
  }
  .clickable { cursor: pointer; }
</style>