| | |
| | | |
| | | <!-- æ¯ä»ä¸åè´§å表 --> |
| | | <el-table |
| | | :data="filteredList" |
| | | :data="recordList" |
| | | style="width: 100%" |
| | | v-loading="loading" |
| | | border |
| | |
| | | <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" /> |
| | |
| | | <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> |
| | |
| | | |
| | | <!-- å页 --> |
| | | <pagination |
| | | :total="pagination.total" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="pagination.currentPage" |
| | | :limit="pagination.pageSize" |
| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | </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) |
| | |
| | | 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) |
| | |
| | | }) |
| | | |
| | | 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' }], |
| | |
| | | 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 handleSearch = () => { |
| | | // æç´¢é»è¾å·²å¨computedä¸å¤ç |
| | | getList() |
| | | } |
| | | |
| | | const resetSearch = () => { |
| | |
| | | |
| | | const handlePayment = (row) => { |
| | | currentRecord.value = row |
| | | paymentAmount.value = row.orderAmount |
| | | paymentAmount.value = row.orderAmount - row.paidAmount |
| | | paymentMethod.value = '' |
| | | paymentRemark.value = '' |
| | | paymentDialogVisible.value = true |
| | |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const index = recordList.value.findIndex(item => item.id === row.id) |
| | | if (index > -1) { |
| | | recordList.value.splice(index, 1) |
| | | pagination.total-- |
| | | let ids = [row.id] |
| | | deletePaymentShipping(ids).then(res => { |
| | | if(res.code === 200){ |
| | | ElMessage.success('å 餿å') |
| | | getList() |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | 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 = 'é¨å仿¬¾' |
| | | currentRecord.value.paidAmount = Number(currentRecord.value.paidAmount) + paymentAmount.value |
| | | if(currentRecord.value.paidAmount == currentRecord.value.orderAmount){ |
| | | currentRecord.value.paymentStatus = '已仿¬¾' |
| | | }else{ |
| | | currentRecord.value.paymentStatus = 'é¨å仿¬¾' |
| | | } |
| | | ElMessage.success('仿¬¾è®°å½å·²ä¿å') |
| | | update(currentRecord.value).then(res => { |
| | | if(res.code === 200){ |
| | | ElMessage.success('仿¬¾ä¿¡æ¯å·²ä¿å') |
| | | paymentDialogVisible.value = false |
| | | getList() |
| | | } |
| | | }) |
| | | |
| | | } |
| | | |
| | | const saveShipping = () => { |
| | |
| | | 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 |
| | | currentRecord.value.shippingStatus = 'å·²åè´§' |
| | | update(currentRecord.value).then(res => { |
| | | if(res.code === 200){ |
| | | ElMessage.success('åè´§ä¿¡æ¯å·²ä¿å') |
| | | shippingDialogVisible.value = false |
| | | getList() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const handleSubmit = () => { |
| | |
| | | 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 } |
| | | 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 |
| | | }) |
| | | pagination.total++ |
| | | add(form).then(res => { |
| | | if(res.code === 200){ |
| | | ElMessage.success('æ°å¢æå') |
| | | getList() |
| | | } |
| | | }) |
| | | } |
| | | dialogVisible.value = false |
| | | } |