潘的第一次 commit

erp-frontend-vue/src/views/Sales/Order/index.vue

@@ -0,0 +1,629 @@
+<template>
+  <div class="page-container">
+    <!-- 搜索区域 -->
+    <el-card class="search-card" shadow="never">
+      <el-form :model="queryParams" :inline="true" @submit.prevent="handleQuery">
+        <el-form-item label="合同号">
+          <el-input
+            v-model="queryParams.contractNo"
+            placeholder="请输入合同号"
+            clearable
+            style="width: 140px"
+          />
+        </el-form-item>
+        <el-form-item label="单据编码">
+          <el-input
+            v-model="queryParams.orderCode"
+            placeholder="请输入单据编码"
+            clearable
+            style="width: 140px"
+          />
+        </el-form-item>
+        <el-form-item label="客户名称">
+          <el-input
+            v-model="queryParams.clientName"
+            placeholder="请输入客户名称"
+            clearable
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item label="销售员">
+          <el-input
+            v-model="queryParams.salesmanName"
+            placeholder="请输入销售员"
+            clearable
+            style="width: 120px"
+          />
+        </el-form-item>
+        <el-form-item label="销售类型">
+          <el-select
+            v-model="queryParams.salesType"
+            placeholder="全部"
+            clearable
+            style="width: 120px"
+          >
+            <el-option
+              v-for="item in salesTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物料名称" v-show="viewMode === 'detail'">
+          <el-input
+            v-model="queryParams.itemName"
+            placeholder="请输入物料名称"
+            clearable
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item label="日期范围">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            style="width: 240px"
+            @change="handleDateChange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <el-icon><Search /></el-icon>搜索
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 工具栏与表格 -->
+    <el-card class="table-card" shadow="never">
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <!-- 视图切换按钮：当前是单据视图时显示"明细"按钮切换到明细视图 -->
+          <el-button
+            v-if="viewMode === 'document'"
+            @click="switchView('detail')"
+          >
+            明细
+          </el-button>
+          <el-button
+            v-else
+            @click="switchView('document')"
+          >
+            单据
+          </el-button>
+          <el-button @click="handleQueryAll">查询所有</el-button>
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>新增
+          </el-button>
+          <!-- 单据视图专有按钮 -->
+          <template v-if="viewMode === 'document'">
+            <el-button
+              type="danger"
+              :disabled="selectedRows.length === 0"
+              @click="handleBatchDelete"
+            >
+              <el-icon><Delete /></el-icon>删除
+            </el-button>
+            <el-button
+              type="primary"
+              :disabled="!canAudit"
+              @click="handleAudit"
+            >
+              <el-icon><Check /></el-icon>审核
+            </el-button>
+            <el-button
+              type="warning"
+              :disabled="!canUnaudit"
+              @click="handleUnaudit"
+            >
+              反审核
+            </el-button>
+          </template>
+          <el-button @click="handleExport">
+            <el-icon><Download /></el-icon>导出
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 明细视图表格 -->
+      <el-table
+        v-if="viewMode === 'detail'"
+        v-loading="loading"
+        :data="detailTableData"
+        stripe
+        border
+        style="width: 100%"
+        :max-height="tableHeight"
+      >
+        <el-table-column type="index" label="序号" width="60" fixed="left" />
+        <el-table-column prop="contractNo" label="合同号" width="130" show-overflow-tooltip />
+        <el-table-column prop="orderCode" label="单据编码" width="140">
+          <template #default="{ row }">
+            <el-link type="primary" @click="handleView(row)">{{ row.orderCode }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderStatus" label="单据状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.orderStatus)">
+              {{ getStatusLabel(row.orderStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="clientName" label="客户名称" width="180" show-overflow-tooltip />
+        <el-table-column prop="salesmanName" label="销售员" width="100" />
+        <el-table-column prop="itemName" label="物料名称" width="180" show-overflow-tooltip />
+        <el-table-column prop="itemCode" label="物料编码" width="120" />
+        <el-table-column prop="quantity" label="数量" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatNumber(row.quantity) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="unitPrice" label="单价" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatCurrency(row.unitPrice) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" label="金额" width="120" align="right">
+          <template #default="{ row }">
+            {{ formatCurrency(row.amount) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="deliveredQty" label="发货数量" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatNumber(row.deliveredQty || 0) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="salesType" label="销售类型" width="100">
+          <template #default="{ row }">
+            {{ getSalesTypeLabel(row.salesType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderDate" label="单据日期" width="110" />
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleProgress(row)">生产进度</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 单据视图表格 -->
+      <el-table
+        v-else
+        v-loading="loading"
+        :data="tableData"
+        stripe
+        border
+        style="width: 100%"
+        :max-height="tableHeight"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" fixed="left" />
+        <el-table-column prop="orderCode" label="单据编码" width="140">
+          <template #default="{ row }">
+            <el-link type="primary" @click="handleView(row)">{{ row.orderCode }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderDate" label="单据日期" width="110" />
+        <el-table-column prop="orderStatus" label="单据状态" width="90" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.orderStatus)">
+              {{ getStatusLabel(row.orderStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="bizType" label="业务类型" width="100">
+          <template #default="{ row }">
+            {{ getBizTypeLabel(row.bizType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="clientName" label="销售客户" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="salesmanName" label="销售员" width="100" />
+        <el-table-column prop="bizStatus" label="业务状态" width="90">
+          <template #default="{ row }">
+            {{ getBizStatusLabel(row.bizStatus) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="auditDate" label="审核日期" width="110" />
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleView(row)">查看</el-button>
+            <el-button
+              type="primary"
+              link
+              @click="handleEdit(row)"
+              :disabled="row.orderStatus === '审核'"
+            >
+              编辑
+            </el-button>
+            <el-popconfirm title="确认删除？" @confirm="handleDelete(row)">
+              <template #reference>
+                <el-button
+                  type="danger"
+                  link
+                  :disabled="row.orderStatus === '审核'"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="queryParams.pageNum"
+          v-model:page-size="queryParams.pageSize"
+          :page-sizes="[20, 50, 100, 200]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Plus, Delete, Check, Download } from '@element-plus/icons-vue'
+import {
+  getSalesOrderList,
+  getSalesOrderDetailList,
+  deleteSalesOrder,
+  auditSalesOrder,
+  unauditSalesOrder,
+  exportSalesOrder,
+  ORDER_STATUS_MAP,
+  SALES_TYPE_OPTIONS,
+  BIZ_TYPE_OPTIONS,
+  BIZ_STATUS_OPTIONS,
+  type SalesOrder,
+  type SalesOrderDetailView,
+  type SalesOrderQuery
+} from '@/api/salesOrder'
+
+const router = useRouter()
+
+// ============ 响应式状态 ============
+
+/** 视图模式：detail=明细视图，document=单据视图 */
+const viewMode = ref<'detail' | 'document'>('document')
+
+/** 加载状态 */
+const loading = ref(false)
+
+/** 查询参数 */
+const queryParams = reactive<SalesOrderQuery>({
+  orderCode: '',
+  contractNo: '',
+  clientName: '',
+  salesmanName: '',
+  salesType: '',
+  itemName: '',
+  beginOrderDate: '',
+  endOrderDate: '',
+  pageNum: 1,
+  pageSize: 100
+})
+
+/** 日期范围 */
+const dateRange = ref<string[]>([])
+
+/** 单据视图数据 */
+const tableData = ref<SalesOrder[]>([])
+
+/** 明细视图数据 */
+const detailTableData = ref<SalesOrderDetailView[]>([])
+
+/** 总条数 */
+const total = ref(0)
+
+/** 选中行（单据视图） */
+const selectedRows = ref<SalesOrder[]>([])
+
+/** 表格高度 */
+const tableHeight = ref(500)
+
+/** 销售类型选项 */
+const salesTypeOptions = SALES_TYPE_OPTIONS
+
+// ============ 计算属性 ============
+
+/** 是否可以审核（选中了开立状态的订单） */
+const canAudit = computed(() => {
+  return selectedRows.value.length > 0 &&
+    selectedRows.value.every(row => row.orderStatus === '开立')
+})
+
+/** 是否可以反审核（选中了审核状态的订单） */
+const canUnaudit = computed(() => {
+  return selectedRows.value.length > 0 &&
+    selectedRows.value.every(row => row.orderStatus === '审核')
+})
+
+// ============ 方法 ============
+
+/** 获取状态标签类型 */
+function getStatusType(status: string): string {
+  return ORDER_STATUS_MAP[status]?.type || ''
+}
+
+/** 获取状态标签文本 */
+function getStatusLabel(status: string): string {
+  return ORDER_STATUS_MAP[status]?.label || status || '-'
+}
+
+/** 获取销售类型标签 */
+function getSalesTypeLabel(value: string): string {
+  const item = SALES_TYPE_OPTIONS.find(opt => opt.value === value)
+  return item?.label || value || '-'
+}
+
+/** 获取业务类型标签 */
+function getBizTypeLabel(value: string): string {
+  const item = BIZ_TYPE_OPTIONS.find(opt => opt.value === value)
+  return item?.label || value || '销售订单'
+}
+
+/** 获取业务状态标签 */
+function getBizStatusLabel(value: string): string {
+  const item = BIZ_STATUS_OPTIONS.find(opt => opt.value === value)
+  return item?.label || value || '正常'
+}
+
+/** 格式化数字 */
+function formatNumber(val: number | undefined): string {
+  if (val === undefined || val === null) return '-'
+  return val.toLocaleString()
+}
+
+/** 格式化金额 */
+function formatCurrency(val: number | undefined): string {
+  if (val === undefined || val === null) return '-'
+  return '¥' + val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+
+/** 日期范围变化 */
+function handleDateChange(val: string[] | null) {
+  if (val && val.length === 2) {
+    queryParams.beginOrderDate = val[0]
+    queryParams.endOrderDate = val[1]
+  } else {
+    queryParams.beginOrderDate = ''
+    queryParams.endOrderDate = ''
+  }
+}
+
+/** 加载数据 */
+async function loadData() {
+  loading.value = true
+  try {
+    if (viewMode.value === 'detail') {
+      const res = await getSalesOrderDetailList(queryParams)
+      detailTableData.value = res.list
+      total.value = res.total
+    } else {
+      const res = await getSalesOrderList(queryParams)
+      tableData.value = res.list
+      total.value = res.total
+    }
+  } catch (error) {
+    console.error('加载数据失败:', error)
+    ElMessage.error('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 切换视图 */
+function switchView(mode: 'detail' | 'document') {
+  viewMode.value = mode
+  selectedRows.value = []
+  queryParams.pageNum = 1
+  loadData()
+}
+
+/** 搜索 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  loadData()
+}
+
+/** 查询所有（清空条件） */
+function handleQueryAll() {
+  queryParams.orderCode = ''
+  queryParams.contractNo = ''
+  queryParams.clientName = ''
+  queryParams.salesmanName = ''
+  queryParams.salesType = ''
+  queryParams.itemName = ''
+  queryParams.beginOrderDate = ''
+  queryParams.endOrderDate = ''
+  dateRange.value = []
+  queryParams.pageNum = 1
+  loadData()
+}
+
+/** 新增 */
+function handleAdd() {
+  router.push('/sales/order/form')
+}
+
+/** 查看 */
+function handleView(row: SalesOrder | SalesOrderDetailView) {
+  const id = 'orderId' in row ? row.orderId : (row as any).orderId
+  router.push(`/sales/order/view/${id}`)
+}
+
+/** 编辑 */
+function handleEdit(row: SalesOrder) {
+  router.push(`/sales/order/form/${row.orderId}`)
+}
+
+/** 删除单个 */
+async function handleDelete(row: SalesOrder) {
+  try {
+    await deleteSalesOrder(row.orderId!)
+    ElMessage.success('删除成功')
+    loadData()
+  } catch (error) {
+    console.error('删除失败:', error)
+    ElMessage.error('删除失败')
+  }
+}
+
+/** 批量删除 */
+async function handleBatchDelete() {
+  if (selectedRows.value.length === 0) return
+  try {
+    await ElMessageBox.confirm('确认删除选中的订单吗？', '警告', { type: 'warning' })
+    const ids = selectedRows.value.map(row => row.orderId!)
+    await deleteSalesOrder(ids)
+    ElMessage.success('删除成功')
+    selectedRows.value = []
+    loadData()
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+/** 审核 */
+async function handleAudit() {
+  if (selectedRows.value.length === 0) return
+  try {
+    await ElMessageBox.confirm('确认审核选中的订单吗？', '提示', { type: 'info' })
+    const ids = selectedRows.value.map(row => row.orderId!)
+    await auditSalesOrder(ids)
+    ElMessage.success('审核成功')
+    selectedRows.value = []
+    loadData()
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error('审核失败')
+    }
+  }
+}
+
+/** 反审核 */
+async function handleUnaudit() {
+  if (selectedRows.value.length === 0) return
+  try {
+    await ElMessageBox.confirm('确认反审核选中的订单吗？', '提示', { type: 'warning' })
+    const ids = selectedRows.value.map(row => row.orderId!)
+    await unauditSalesOrder(ids)
+    ElMessage.success('反审核成功')
+    selectedRows.value = []
+    loadData()
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error('反审核失败')
+    }
+  }
+}
+
+/** 导出 */
+async function handleExport() {
+  try {
+    await ElMessageBox.confirm('是否确认导出销售订单数据？', '警告', { type: 'warning' })
+    const blob = await exportSalesOrder(queryParams)
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `销售订单_${new Date().toISOString().slice(0, 10)}.xlsx`
+    link.click()
+    window.URL.revokeObjectURL(url)
+    ElMessage.success('导出成功')
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error('导出失败')
+    }
+  }
+}
+
+/** 生产进度 */
+function handleProgress(row: SalesOrderDetailView) {
+  router.push(`/sales/order/progress/${row.orderId}`)
+}
+
+/** 表格选择变化 */
+function handleSelectionChange(rows: SalesOrder[]) {
+  selectedRows.value = rows
+}
+
+/** 分页大小变化 */
+function handleSizeChange() {
+  queryParams.pageNum = 1
+  loadData()
+}
+
+/** 当前页变化 */
+function handleCurrentChange() {
+  loadData()
+}
+
+/** 计算表格高度 */
+function calcTableHeight() {
+  tableHeight.value = window.innerHeight - 300
+}
+
+// ============ 生命周期 ============
+
+onMounted(() => {
+  loadData()
+  calcTableHeight()
+  window.addEventListener('resize', calcTableHeight)
+})
+</script>
+
+<style scoped>
+.page-container {
+  padding: 8px;
+}
+
+.search-card {
+  margin-bottom: 12px;
+}
+
+.search-card :deep(.el-card__body) {
+  padding: 12px 12px 0;
+}
+
+.search-card :deep(.el-form-item) {
+  margin-bottom: 12px;
+  margin-right: 12px;
+}
+
+.table-card :deep(.el-card__body) {
+  padding: 12px;
+}
+
+.toolbar {
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.pagination-wrapper {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>