车辆信息，备货单等页面

2025-09-04 15:09:17 +08:00
parent 8a0d4fc516
commit 9bd7c89cb4
25 changed files with 9254 additions and 0 deletions
@@ -0,0 +1,157 @@
+<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>
+