Merge remote-tracking branch 'origin/dev_天津军泰伟业' into dev_天津军泰伟业

gaoluyang

6 天以前 71a9eef518f2f2f1a1eb2fb90f2eb8ab7b155bc8

 src/views/salesManagement/paymentShipping/index.vue

@@ -2,188 +2,255 @@
  <div class="app-container">
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="20" class="search-row">
      <el-row :gutter="20"
              class="search-row">
        <el-col :span="6">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
            @keyup.enter="handleSearch"
          >
          <el-input v-model="searchForm.orderNo"
                    placeholder="请输入订单号"
                    clearable
                    @keyup.enter="handleSearch">
            <template #prefix>
              <el-icon><Search /></el-icon>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.paymentStatus" placeholder="请选择付款状态" clearable>
            <el-option label="未付款" value="未付款"></el-option>
            <el-option label="已付款" value="已付款"></el-option>
            <el-option label="部分付款" value="部分付款"></el-option>
          <el-select v-model="searchForm.paymentStatus"
                     placeholder="请选择付款状态"
                     clearable>
            <el-option label="未付款"
                       value="未付款"></el-option>
            <el-option label="已付款"
                       value="已付款"></el-option>
            <el-option label="部分付款"
                       value="部分付款"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.shippingStatus" placeholder="请选择发货状态" clearable>
            <el-option label="待发货" value="待发货"></el-option>
            <el-option label="已发货" value="已发货"></el-option>
            <el-option label="已签收" value="已签收"></el-option>
          <el-select v-model="searchForm.shippingStatus"
                     placeholder="请选择发货状态"
                     clearable>
            <el-option label="待发货"
                       value="待发货"></el-option>
            <el-option label="已发货"
                       value="已发货"></el-option>
            <el-option label="已签收"
                       value="已签收"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary"
                     @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">
          <el-button style="float: right;"
                     type="primary"
                     @click="handleAdd">
            新增记录
          </el-button>
        </el-col>
      </el-row>

      <!-- 支付与发货列表 -->
      <el-table
        :data="filteredList"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="customer" label="客户名称" />
        <el-table-column prop="orderAmount" label="订单金额" width="120">
      <el-table :data="recordList"
                style="width: 100%"
                v-loading="loading"
                border
                stripe
                height="calc(100vh - 22em)">
        <el-table-column prop="id"
                         label="ID"
                         width="80"
                         align="center" />
        <el-table-column prop="orderNo"
                         label="订单号" />
        <el-table-column prop="customer"
                         label="客户名称" />
        <el-table-column prop="orderAmount"
                         label="订单金额"
                         width="120">
          <template #default="scope">
            ¥{{ scope.row.orderAmount.toFixed(2) }}
            ¥{{ scope.row.orderAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付款方式" width="120" />
        <el-table-column prop="paymentStatus" label="付款状态" width="100">
        <el-table-column prop="orderAmount"
                         label="已付款金额"
                         width="120">
          <template #default="scope">
            ¥{{ scope.row.paidAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus"
                         label="付款状态"
                         width="100">
          <template #default="scope">
            <el-tag :type="getPaymentStatusType(scope.row.paymentStatus)">
              {{ scope.row.paymentStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shippingStatus" label="发货状态" width="100">
        <el-table-column prop="shippingStatus"
                         label="发货状态"
                         width="100">
          <template #default="scope">
            <el-tag :type="getShippingStatusType(scope.row.shippingStatus)">
              {{ scope.row.shippingStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="shippingDate" label="发货日期" width="120" />
        <el-table-column label="操作" width="250" fixed="right" align="center">
        <el-table-column prop="shippingDate"
                         label="发货日期"
                         width="120" />
        <el-table-column label="操作"
                         width="250"
                         fixed="right"
                         align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handlePayment(scope.row)" v-if="scope.row.paymentStatus !== '已付款'">付款</el-button>
            <el-button link type="primary" @click="handleShipping(scope.row)" v-if="scope.row.paymentStatus === '已付款' && scope.row.shippingStatus === '待发货'">发货</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <!--            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>-->
            <el-button link
                       type="primary"
                       @click="handlePayment(scope.row)"
                       v-if="scope.row.paymentStatus !== '已付款'">付款</el-button>
            <el-button link
                       type="primary"
                       @click="handleShipping(scope.row)"
                       v-if="scope.row.paymentStatus === '已付款' && scope.row.shippingStatus === '待发货'">发货</el-button>
            <el-button link
                       type="primary"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link
                       type="danger"
                       @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
        @pagination="handleCurrentChange"
      />
      <pagination :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page="pagination.current"
                  :limit="pagination.size"
                  @pagination="handleCurrentChange" />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="700px">
      <el-form :model="form"
               :rules="rules"
               ref="formRef"
               label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="请输入订单号"></el-input>
            <el-form-item label="订单号"
                          prop="orderNo">
              <el-input v-model="form.orderNo"
                        placeholder="请输入订单号"
                        disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%">
                <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
                <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
                <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
            <el-form-item label="客户名称"
                          prop="customer">
              <el-select v-model="form.customer"
                         placeholder="请选择客户"
                         style="width: 100%">
                <el-option label="上海科技有限公司"
                           value="上海科技有限公司"></el-option>
                <el-option label="深圳电子有限公司"
                           value="深圳电子有限公司"></el-option>
                <el-option label="北京贸易公司"
                           value="北京贸易公司"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单金额" prop="orderAmount">
              <el-input-number v-model="form.orderAmount" :precision="2" :min="0" style="width: 100%"></el-input-number>
            <el-form-item label="订单金额"
                          prop="orderAmount">
              <el-input-number v-model="form.orderAmount"
                               :precision="2"
                               :min="0"
                               style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款状态"
                          prop="paymentStatus">
              <el-select v-model="form.paymentStatus"
                         placeholder="请选择付款状态"
                         style="width: 100%">
                <el-option label="未付款"
                           value="未付款"></el-option>
                <el-option label="已付款"
                           value="已付款"></el-option>
                <el-option label="部分付款"
                           value="部分付款"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
                <el-option label="全款到付" value="全款到付"></el-option>
                <el-option label="分期付款" value="分期付款"></el-option>
                <el-option label="月结" value="月结"></el-option>
            <el-form-item label="发货状态"
                          prop="shippingStatus">
              <el-select v-model="form.shippingStatus"
                         placeholder="请选择发货状态"
                         style="width: 100%">
                <el-option label="待发货"
                           value="待发货"></el-option>
                <el-option label="已发货"
                           value="已发货"></el-option>
                <el-option label="已签收"
                           value="已签收"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款状态" prop="paymentStatus">
              <el-select v-model="form.paymentStatus" placeholder="请选择付款状态" style="width: 100%">
                <el-option label="未付款" value="未付款"></el-option>
                <el-option label="已付款" value="已付款"></el-option>
                <el-option label="部分付款" value="部分付款"></el-option>
              </el-select>
            <el-form-item label="发货日期"
                          prop="shippingDate">
              <el-date-picker v-model="form.shippingDate"
                              type="date"
                              placeholder="选择发货日期"
                              style="width: 100%"
                              format="YYYY-MM-DD"
                              value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货状态" prop="shippingStatus">
              <el-select v-model="form.shippingStatus" placeholder="请选择发货状态" style="width: 100%">
                <el-option label="待发货" value="待发货"></el-option>
                <el-option label="已发货" value="已发货"></el-option>
                <el-option label="已签收" value="已签收"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发货日期" prop="shippingDate">
              <el-date-picker
                v-model="form.shippingDate"
                type="date"
                placeholder="选择发货日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流单号" prop="trackingNo">
              <el-input v-model="form.trackingNo" placeholder="请输入物流单号"></el-input>
            <el-form-item label="物流单号"
                          prop="trackingNo">
              <el-input v-model="form.trackingNo"
                        placeholder="请输入物流单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" rows="3"></el-input>
            <el-form-item label="备注"
                          prop="remark">
              <el-input type="textarea"
                        v-model="form.remark"
                        placeholder="请输入备注信息"
                        rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="handleSubmit">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 付款对话框 -->
    <el-dialog v-model="paymentDialogVisible" title="订单付款" width="500px">
    <el-dialog v-model="paymentDialogVisible"
               title="订单付款"
               width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRecord.orderNo }}</span>
@@ -192,33 +259,36 @@
          <span>{{ currentRecord.customer }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>¥{{ currentRecord.orderAmount.toFixed(2) }}</span>
          <span>¥{{ currentRecord.orderAmount }}</span>
        </el-form-item>
        <el-form-item label="付款金额" prop="paymentAmount">
          <el-input-number v-model="paymentAmount" :precision="2" :min="0" :max="currentRecord.orderAmount" style="width: 100%"></el-input-number>
        <el-form-item label="付款金额"
                      prop="paymentAmount">
          <el-input-number v-model="paymentAmount"
                           :precision="2"
                           :min="0"
                           :max="currentRecord.orderAmount"
                           style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="付款方式" prop="paymentMethod">
          <el-select v-model="paymentMethod" placeholder="请选择付款方式" style="width: 100%">
            <el-option label="现金" value="现金"></el-option>
            <el-option label="银行转账" value="银行转账"></el-option>
            <el-option label="支付宝" value="支付宝"></el-option>
            <el-option label="微信支付" value="微信支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款备注" prop="paymentRemark">
          <el-input type="textarea" v-model="paymentRemark" rows="3" placeholder="请输入付款备注"></el-input>
        <el-form-item label="付款备注"
                      prop="paymentRemark">
          <el-input type="textarea"
                    v-model="paymentRemark"
                    rows="3"
                    placeholder="请输入付款备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="savePayment">确 定</el-button>
          <el-button @click="paymentDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="savePayment">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 发货对话框 -->
    <el-dialog v-model="shippingDialogVisible" title="订单发货" width="500px">
    <el-dialog v-model="shippingDialogVisible"
               title="订单发货"
               width="500px">
      <el-form label-width="100px">
        <el-form-item label="订单号">
          <span>{{ currentRecord.orderNo }}</span>
@@ -226,36 +296,50 @@
        <el-form-item label="客户名称">
          <span>{{ currentRecord.customer }}</span>
        </el-form-item>
        <el-form-item label="发货日期" prop="shippingDate">
          <el-date-picker
            v-model="shippingDate"
            type="date"
            placeholder="选择发货日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        <el-form-item label="发货日期"
                      prop="shippingDate">
          <el-date-picker v-model="shippingDate"
                          type="date"
                          placeholder="选择发货日期"
                          style="width: 100%"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="物流公司" prop="logisticsCompany">
          <el-select v-model="logisticsCompany" placeholder="请选择物流公司" style="width: 100%">
            <el-option label="顺丰速运" value="顺丰速运"></el-option>
            <el-option label="圆通速递" value="圆通速递"></el-option>
            <el-option label="中通快递" value="中通快递"></el-option>
            <el-option label="申通快递" value="申通快递"></el-option>
            <el-option label="韵达速递" value="韵达速递"></el-option>
        <el-form-item label="物流公司"
                      prop="logisticsCompany">
          <el-select v-model="logisticsCompany"
                     placeholder="请选择物流公司"
                     style="width: 100%">
            <el-option label="顺丰速运"
                       value="顺丰速运"></el-option>
            <el-option label="圆通速递"
                       value="圆通速递"></el-option>
            <el-option label="中通快递"
                       value="中通快递"></el-option>
            <el-option label="申通快递"
                       value="申通快递"></el-option>
            <el-option label="韵达速递"
                       value="韵达速递"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNo">
          <el-input v-model="trackingNo" placeholder="请输入物流单号"></el-input>
        <el-form-item label="物流单号"
                      prop="trackingNo">
          <el-input v-model="trackingNo"
                    placeholder="请输入物流单号"></el-input>
        </el-form-item>
        <el-form-item label="发货备注" prop="shippingRemark">
          <el-input type="textarea" v-model="shippingRemark" rows="3" placeholder="请输入发货备注"></el-input>
        <el-form-item label="发货备注"
                      prop="shippingRemark">
          <el-input type="textarea"
                    v-model="shippingRemark"
                    rows="3"
                    placeholder="请输入发货备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="saveShipping">确 定</el-button>
          <el-button @click="shippingDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveShipping">确 定</el-button>
        </div>
      </template>
    </el-dialog>
@@ -263,272 +347,241 @@
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
  import { ref, reactive, computed, onMounted } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { Plus, Search } from "@element-plus/icons-vue";
  import {
    listPage,
    add,
    update,
    deletePaymentShipping,
  } from "@/api/salesManagement/paymentShipping.js";
  import Pagination from "@/components/PIMTable/Pagination.vue";

// 响应式数据
const loading = ref(false)
const searchForm = reactive({
  orderNo: '',
  paymentStatus: '',
  shippingStatus: ''
})
  const total = ref(0);
  onMounted(() => {
    getList();
  });

const recordList = ref([
  {
    id: 1,
    orderNo: 'ORD202312001',
    customer: '上海科技有限公司',
    orderAmount: 50000.00,
    paymentMethod: '全款到付',
    paymentStatus: '已付款',
    shippingStatus: '已发货',
    shippingDate: '2023-12-05',
    trackingNo: 'SF1234567890',
    remark: '重要客户订单'
  },
  {
    id: 2,
    orderNo: 'ORD202312002',
    customer: '深圳电子有限公司',
    orderAmount: 35000.00,
    paymentMethod: '分期付款',
    paymentStatus: '部分付款',
    shippingStatus: '待发货',
    shippingDate: '',
    trackingNo: '',
    remark: '常规订单'
  },
  {
    id: 3,
    orderNo: 'ORD202312003',
    customer: '北京贸易公司',
    orderAmount: 28000.00,
    paymentMethod: '月结',
    paymentStatus: '未付款',
    shippingStatus: '待发货',
    shippingDate: '',
    trackingNo: '',
    remark: '新客户订单'
  }
])

const pagination = reactive({
  total: 3,
  currentPage: 1,
  pageSize: 10
})

const dialogVisible = ref(false)
const dialogTitle = ref('新增记录')
const form = reactive({
  orderNo: '',
  customer: '',
  orderAmount: 0,
  paymentMethod: '',
  paymentStatus: '未付款',
  shippingStatus: '待发货',
  shippingDate: '',
  trackingNo: '',
  remark: ''
})

const rules = {
  orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  customer: [{ required: true, message: '请选择客户', trigger: 'change' }],
  orderAmount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
  paymentStatus: [{ required: true, message: '请选择付款状态', trigger: 'change' }],
  shippingStatus: [{ required: true, message: '请选择发货状态', trigger: 'change' }]
}

const isEdit = ref(false)
const editId = ref(null)
const paymentDialogVisible = ref(false)
const shippingDialogVisible = ref(false)
const currentRecord = ref({})
const paymentAmount = ref(0)
const paymentMethod = ref('')
const paymentRemark = ref('')
const shippingDate = ref('')
const logisticsCompany = ref('')
const trackingNo = ref('')
const shippingRemark = ref('')
const formRef = ref()

// 计算属性
const filteredList = computed(() => {
  let list = recordList.value
  if (searchForm.orderNo) {
    list = list.filter(item => item.orderNo.includes(searchForm.orderNo))
  }
  if (searchForm.paymentStatus) {
    list = list.filter(item => item.paymentStatus === searchForm.paymentStatus)
  }
  if (searchForm.shippingStatus) {
    list = list.filter(item => item.shippingStatus === searchForm.shippingStatus)
  }
  return list
})

// 方法
const getPaymentStatusType = (status) => {
  const statusMap = {
    '未付款': 'danger',
    '已付款': 'success',
    '部分付款': 'warning'
  }
  return statusMap[status] || 'info'
}

const getShippingStatusType = (status) => {
  const statusMap = {
    '待发货': 'warning',
    '已发货': 'primary',
    '已签收': 'success'
  }
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.paymentStatus = ''
  searchForm.shippingStatus = ''
}

const handleAdd = () => {
  dialogTitle.value = '新增记录'
  isEdit.value = false
  form.orderNo = ''
  form.customer = ''
  form.orderAmount = 0
  form.paymentMethod = ''
  form.paymentStatus = '未付款'
  form.shippingStatus = '待发货'
  form.shippingDate = ''
  form.trackingNo = ''
  form.remark = ''
  dialogVisible.value = true
}

const handleView = (row) => {
  // 查看记录详情
  ElMessage.info('查看记录详情功能待实现')
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑记录'
  isEdit.value = true
  editId.value = row.id
  Object.assign(form, row)
  dialogVisible.value = true
}

const handlePayment = (row) => {
  currentRecord.value = row
  paymentAmount.value = row.orderAmount
  paymentMethod.value = ''
  paymentRemark.value = ''
  paymentDialogVisible.value = true
}

const handleShipping = (row) => {
  currentRecord.value = row
  shippingDate.value = ''
  logisticsCompany.value = ''
  trackingNo.value = ''
  shippingRemark.value = ''
  shippingDialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = recordList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      recordList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}

const savePayment = () => {
  if (!paymentMethod.value) {
    ElMessage.warning('请选择付款方式')
    return
  }
  
  const index = recordList.value.findIndex(item => item.id === currentRecord.value.id)
  if (index > -1) {
    if (paymentAmount.value >= currentRecord.value.orderAmount) {
      recordList.value[index].paymentStatus = '已付款'
    } else if (paymentAmount.value > 0) {
      recordList.value[index].paymentStatus = '部分付款'
    }
    ElMessage.success('付款记录已保存')
    paymentDialogVisible.value = false
  }
}

const saveShipping = () => {
  if (!shippingDate.value || !logisticsCompany.value || !trackingNo.value) {
    ElMessage.warning('请填写完整的发货信息')
    return
  }
  
  const index = recordList.value.findIndex(item => item.id === currentRecord.value.id)
  if (index > -1) {
    recordList.value[index].shippingStatus = '已发货'
    recordList.value[index].shippingDate = shippingDate.value
    recordList.value[index].trackingNo = trackingNo.value
    ElMessage.success('发货信息已保存')
    shippingDialogVisible.value = false
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        // 编辑
        const index = recordList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          recordList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
        }
      } else {
        // 新增
        const newId = Math.max(...recordList.value.map(item => item.id)) + 1
        recordList.value.push({
          ...form,
          id: newId
        })
        pagination.total++
        ElMessage.success('新增成功')
  const getList = () => {
    loading.value = true;
    listPage({ ...searchForm, ...pagination }).then(res => {
      if (res.code === 200) {
        recordList.value = res.data.records;
        total.value = res.data.total;
        loading.value = false;
        console.log(recordList.value);
      }
      dialogVisible.value = false
    }
  })
}
    });
  };

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
  // 响应式数据
  const loading = ref(false);
  const searchForm = reactive({
    orderNo: "",
    paymentStatus: "",
    shippingStatus: "",
  });

  const recordList = ref([]);

  const pagination = reactive({
    current: 1,
    size: 10,
  });

  const dialogVisible = ref(false);
  const dialogTitle = ref("新增记录");
  const form = reactive({
    orderNo: "",
    customer: "",
    orderAmount: 0,
    paymentStatus: "未付款",
    shippingStatus: "待发货",
    shippingDate: "",
    trackingNo: "",
    remark: "",
  });

  const rules = {
    // orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
    customer: [{ required: true, message: "请选择客户", trigger: "change" }],
    orderAmount: [{ required: true, message: "请输入订单金额", trigger: "blur" }],
    paymentStatus: [
      { required: true, message: "请选择付款状态", trigger: "change" },
    ],
    shippingStatus: [
      { required: true, message: "请选择发货状态", trigger: "change" },
    ],
  };

  const isEdit = ref(false);
  const editId = ref(null);
  const paymentDialogVisible = ref(false);
  const shippingDialogVisible = ref(false);
  const currentRecord = ref({});
  const paymentAmount = ref(0);
  const paymentRemark = ref("");
  const shippingDate = ref("");
  const logisticsCompany = ref("");
  const trackingNo = ref("");
  const shippingRemark = ref("");
  const formRef = ref();

  // 方法
  const getPaymentStatusType = status => {
    const statusMap = {
      未付款: "danger",
      已付款: "success",
      部分付款: "warning",
    };
    return statusMap[status] || "info";
  };

  const getShippingStatusType = status => {
    const statusMap = {
      待发货: "warning",
      已发货: "primary",
      已签收: "success",
    };
    return statusMap[status] || "info";
  };

  const handleSearch = () => {
    // 搜索逻辑已在computed中处理
    getList();
  };

  const resetSearch = () => {
    searchForm.orderNo = "";
    searchForm.paymentStatus = "";
    searchForm.shippingStatus = "";
  };

  const handleAdd = () => {
    dialogTitle.value = "新增记录";
    isEdit.value = false;
    form.orderNo = "";
    form.customer = "";
    form.orderAmount = 0;
    form.paymentStatus = "未付款";
    form.shippingStatus = "待发货";
    form.shippingDate = "";
    form.trackingNo = "";
    form.remark = "";
    dialogVisible.value = true;
  };

  const handleView = row => {
    // 查看记录详情
    ElMessage.info("查看记录详情功能待实现");
  };

  const handleEdit = row => {
    dialogTitle.value = "编辑记录";
    isEdit.value = true;
    editId.value = row.id;
    Object.assign(form, row);
    dialogVisible.value = true;
  };

  const handlePayment = row => {
    currentRecord.value = row;
    paymentAmount.value = row.orderAmount - row.paidAmount;
    paymentRemark.value = "";
    paymentDialogVisible.value = true;
  };

  const handleShipping = row => {
    currentRecord.value = row;
    shippingDate.value = "";
    logisticsCompany.value = "";
    trackingNo.value = "";
    shippingRemark.value = "";
    shippingDialogVisible.value = true;
  };

  const handleDelete = row => {
    ElMessageBox.confirm("确认删除该记录吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let ids = [row.id];
      deletePaymentShipping(ids).then(res => {
        if (res.code === 200) {
          ElMessage.success("删除成功");
          getList();
        }
      });
    });
  };

  const savePayment = () => {
    currentRecord.value.paidAmount =
      Number(currentRecord.value.paidAmount) + paymentAmount.value;
    if (currentRecord.value.paidAmount == currentRecord.value.orderAmount) {
      currentRecord.value.paymentStatus = "已付款";
    } else {
      currentRecord.value.paymentStatus = "部分付款";
    }
    update(currentRecord.value).then(res => {
      if (res.code === 200) {
        ElMessage.success("付款信息已保存");
        paymentDialogVisible.value = false;
        getList();
      }
    });
  };

  const saveShipping = () => {
    if (!shippingDate.value || !logisticsCompany.value || !trackingNo.value) {
      ElMessage.warning("请填写完整的发货信息");
      return;
    }
    currentRecord.value.shippingStatus = "已发货";
    update(currentRecord.value).then(res => {
      if (res.code === 200) {
        ElMessage.success("发货信息已保存");
        shippingDialogVisible.value = false;
        getList();
      }
    });
  };

  const handleSubmit = () => {
    formRef.value.validate(valid => {
      if (valid) {
        if (isEdit.value) {
          // 编辑
          update(form).then(res => {
            if (res.code === 200) {
              ElMessage.success("编辑成功");
              getList();
            }
          });
        } else {
          // 新增
          add(form).then(res => {
            if (res.code === 200) {
              ElMessage.success("新增成功");
              getList();
            }
          });
        }
        dialogVisible.value = false;
      }
    });
  };

  const handleCurrentChange = val => {
    pagination.current = val.page;
    pagination.size = val.limit;
  };
</script>

<style scoped>
.search-row {
  margin-bottom: 20px;
}
  .search-row {
    margin-bottom: 20px;
  }
</style>