art-design/src/views/admin/stock/final_list_admin.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="order_no" min-width="140" />
          <ElTableColumn label="阿里订单号/PN号" prop="pi_no" min-width="160" />
          <ElTableColumn label="客户名称" prop="customer_snapshot" min-width="120" />
          <ElTableColumn label="客户来源" prop="customer_source_snapshot" min-width="120" />
          <ElTableColumn label="业务员" prop="salesperson_snapshot" min-width="100" />
          <ElTableColumn label="日期" prop="created_at" min-width="120" />
          <ElTableColumn label="状态" prop="approval_status">
            <template #default="scope">
              <div v-if="scope.row.appro_status">
                <div
                  ><span :class="statusClass(scope.row.appro_status.status)">{{ scope.row.appro_status.status_desc ? scope.row.appro_status.status_desc : '' }}</span>
                  <span v-if="scope.row.appro_status.name != ''"
                    >【{{ scope.row.appro_status.name }}】</span
                  >
                </div>
              </div>
              <div v-else></div>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" fixed="right" min-width="120" align="center">
            <template #default="scope">
              <ElRow :gutter="10" justify="center">
                <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'
  // import { CrmService } from '@/api/crmApi'
  import { manageService } from '@/api/adminApi'
  import { useAuth } from '@/composables/useAuth'

  const { hasAuth } = useAuth()


  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 { currentPage, pageSize } = pagination
      const params = {
        current: currentPage,
        size: pageSize,
        is_final: 1, // 只获取备货单，非终版
        keyword: keyword.value
      }

      const { records, current, size, total } = await manageService.getStockList(params)
      tableData.value = records || []
      Object.assign(pagination, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  function statusClass(status: any) {
    if (status === 'rejected') return 'status-lost'
    if (status === 'approved') return 'status-following'
    return 'status-dealed'
  }

  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 handleView1 = (row: any) => {
    router.push({
      path: '/admin/stock/final_show_admin',
      query: { id: row.id } // 可带客户名等参数
    })
    // 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; }
  .status-following {
    color: #00a43f;
    font-weight: bold;
  }

  .status-dealed {
    color: #3471ff;
    font-weight: bold;
  }

  .status-lost {
    color: #ff0000;
    font-weight: bold;
  }
</style>