yys 支付与发货管理联调

maven

12 小时以前 5a85c220e182202b94e1637d235f3534a5914993

 src/views/salesManagement/paymentShipping/index.vue

@@ -40,7 +40,7 @@

      <!-- 支付与发货列表 -->
      <el-table
        :data="filteredList"
        :data="recordList"
        style="width: 100%"
        v-loading="loading"
        border
@@ -52,7 +52,12 @@
        <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="orderAmount" label="已付款金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.paidAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付款方式" width="120" />
@@ -73,7 +78,7 @@
        <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="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>
@@ -84,7 +89,7 @@

      <!-- 分页 -->
      <pagination
        :total="pagination.total"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page="pagination.currentPage"
        :limit="pagination.pageSize"
@@ -98,7 +103,7 @@
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="请输入订单号"></el-input>
              <el-input v-model="form.orderNo" placeholder="请输入订单号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -192,7 +197,7 @@
          <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>
@@ -263,10 +268,28 @@
</template>

<script setup>
import { ref, reactive, computed } from '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 total = ref(0)
onMounted(() => {
    getList()
})

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)
    }
  })
}

// 响应式数据
const loading = ref(false)
@@ -276,49 +299,11 @@
  shippingStatus: ''
})

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 recordList = ref([])

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

const dialogVisible = ref(false)
@@ -336,7 +321,7 @@
})

const rules = {
  orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  // orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  customer: [{ required: true, message: '请选择客户', trigger: 'change' }],
  orderAmount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
@@ -357,21 +342,6 @@
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) => {
@@ -394,6 +364,7 @@

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

const resetSearch = () => {
@@ -432,7 +403,7 @@

const handlePayment = (row) => {
  currentRecord.value = row
  paymentAmount.value = row.orderAmount
  paymentAmount.value = row.orderAmount - row.paidAmount
  paymentMethod.value = ''
  paymentRemark.value = ''
  paymentDialogVisible.value = true
@@ -453,12 +424,13 @@
    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('删除成功')
    }
    let ids = [row.id]
    deletePaymentShipping(ids).then(res => {
      if(res.code === 200){
        ElMessage.success('删除成功')
        getList()
      }
    })
  })
}

@@ -467,17 +439,20 @@
    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
  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 = () => {
@@ -485,15 +460,14 @@
    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
  }
  currentRecord.value.shippingStatus = '已发货'
  update(currentRecord.value).then(res => {
    if(res.code === 200){
      ElMessage.success('发货信息已保存')
      shippingDialogVisible.value = false
      getList()
    }
  })
}

const handleSubmit = () => {
@@ -501,20 +475,20 @@
    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('编辑成功')
        }
        update(form).then(res => {
          if(res.code === 200){
            ElMessage.success('编辑成功')
            getList()
          }
        })
      } else {
        // 新增
        const newId = Math.max(...recordList.value.map(item => item.id)) + 1
        recordList.value.push({
          ...form,
          id: newId
        add(form).then(res => {
          if(res.code === 200){
            ElMessage.success('新增成功')
            getList()
          }
        })
        pagination.total++
        ElMessage.success('新增成功')
      }
      dialogVisible.value = false
    }