| | |
| | | <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.customer" 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.customer" |
| | | 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.status" placeholder="请选择订单状态" clearable> |
| | | <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 v-model="searchForm.status" |
| | | placeholder="请选择订单状态" |
| | | clearable> |
| | | <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-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="订单号" width="150" /> |
| | | <el-table-column prop="customer" label="客户名称" /> |
| | | <el-table-column prop="salesperson" label="业务员" width="100" /> |
| | | <el-table-column prop="orderDate" label="下单日期" width="120" /> |
| | | <el-table-column prop="amount" label="订单金额" width="120"> |
| | | <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="订单号" |
| | | width="150" /> |
| | | <el-table-column prop="customer" |
| | | label="客户名称" /> |
| | | <el-table-column prop="salesperson" |
| | | label="业务员" |
| | | width="100" /> |
| | | <el-table-column prop="orderDate" |
| | | label="下单日期" |
| | | width="120" /> |
| | | <el-table-column prop="amount" |
| | | label="订单金额" |
| | | width="120"> |
| | | <template #default="scope"> |
| | | ¥{{ scope.row.amount.toFixed(2) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="paymentMethod" label="付款方式" width="120" /> |
| | | <el-table-column prop="status" label="订单状态" width="100"> |
| | | <el-table-column prop="status" |
| | | label="订单状态" |
| | | width="100"> |
| | | <template #default="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | | {{ scope.row.status }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="250" fixed="right" align="center"> |
| | | <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="handleEdit(scope.row)" v-if="scope.row.status === '待审核'">编辑</el-button> |
| | | <el-button link type="primary" @click="handleReview(scope.row)" v-if="scope.row.status === '待审核'">审核</el-button> |
| | | <el-button link type="primary" @click="handleTransfer(scope.row)" v-if="scope.row.status === '已审核'">转单</el-button> |
| | | <el-button link type="danger" @click="handleCancel(scope.row)" v-if="scope.row.status === '待审核'">取消</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | @click="handleView(scope.row)">查看</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | @click="handleEdit(scope.row)" |
| | | v-if="scope.row.status === '待审核'">编辑</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | @click="handleReview(scope.row)" |
| | | v-if="scope.row.status === '待审核'">审核</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | @click="handleTransfer(scope.row)" |
| | | v-if="scope.row.status === '已审核'">转单</el-button> |
| | | <el-button link |
| | | type="danger" |
| | | @click="handleCancel(scope.row)" |
| | | v-if="scope.row.status === '待审核'">取消</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="pagination.total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="pagination.currentPage" |
| | | :limit="pagination.pageSize" |
| | | @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="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-col :span="12"> |
| | | <el-form-item label="业务员" prop="salesperson"> |
| | | <el-select v-model="form.salesperson" 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="salesperson"> |
| | | <el-select v-model="form.salesperson" |
| | | 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="orderDate"> |
| | | <el-date-picker |
| | | v-model="form.orderDate" |
| | | type="date" |
| | | placeholder="选择订单日期" |
| | | style="width: 100%" |
| | | format="YYYY-MM-DD" |
| | | value-format="YYYY-MM-DD" |
| | | /> |
| | | <el-form-item label="订单日期" |
| | | prop="orderDate"> |
| | | <el-date-picker v-model="form.orderDate" |
| | | 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="amount"> |
| | | <el-input-number v-model="form.amount" :precision="2" :min="0" style="width: 100%"></el-input-number> |
| | | <el-form-item label="订单金额" |
| | | prop="amount"> |
| | | <el-input-number v-model="form.amount" |
| | | :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="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-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="订单状态" prop="status"> |
| | | <el-select v-model="form.status" 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="status"> |
| | | <el-select v-model="form.status" |
| | | 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-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="reviewDialogVisible" title="订单审核" width="500px"> |
| | | <el-dialog v-model="reviewDialogVisible" |
| | | title="订单审核" |
| | | width="500px"> |
| | | <el-form label-width="100px"> |
| | | <el-form-item label="订单号"> |
| | | <span>{{ currentOrder.orderNo }}</span> |
| | |
| | | <el-form-item label="订单金额"> |
| | | <span>¥{{ currentOrder.amount.toFixed(2) }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="审核结果" prop="reviewResult"> |
| | | <el-form-item label="审核结果" |
| | | prop="reviewResult"> |
| | | <el-radio-group v-model="reviewResult"> |
| | | <el-radio label="通过">通过</el-radio> |
| | | <el-radio label="拒绝">拒绝</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="审核意见" prop="reviewComment"> |
| | | <el-input type="textarea" v-model="reviewComment" rows="3" placeholder="请输入审核意见"></el-input> |
| | | <el-form-item label="审核意见" |
| | | prop="reviewComment"> |
| | | <el-input type="textarea" |
| | | v-model="reviewComment" |
| | | rows="3" |
| | | placeholder="请输入审核意见"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" |
| | | @click="saveReview">确 定</el-button> |
| | | <el-button @click="reviewDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="saveReview">确 定</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <!-- 订单转单对话框 --> |
| | | <el-dialog v-model="transferDialogVisible" title="订单转单" width="500px"> |
| | | <el-dialog v-model="transferDialogVisible" |
| | | title="订单转单" |
| | | width="500px"> |
| | | <el-form label-width="100px"> |
| | | <el-form-item label="订单号"> |
| | | <span>{{ currentOrder.orderNo }}</span> |
| | |
| | | <el-form-item label="当前业务员"> |
| | | <span>{{ currentOrder.salesperson }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="转单给" prop="newSalesperson"> |
| | | <el-select v-model="newSalesperson" 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="newSalesperson"> |
| | | <el-select v-model="newSalesperson" |
| | | 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-form-item label="转单原因" prop="transferReason"> |
| | | <el-input type="textarea" v-model="transferReason" rows="3" placeholder="请输入转单原因"></el-input> |
| | | <el-form-item label="转单原因" |
| | | prop="transferReason"> |
| | | <el-input type="textarea" |
| | | v-model="transferReason" |
| | | rows="3" |
| | | placeholder="请输入转单原因"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" |
| | | @click="saveTransfer">确 定</el-button> |
| | | <el-button @click="transferDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="saveTransfer">确 定</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </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 } from "vue"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import { Plus, Search } from "@element-plus/icons-vue"; |
| | | import Pagination from "@/components/PIMTable/Pagination.vue"; |
| | | |
| | | // 响应式数据 |
| | | const loading = ref(false) |
| | | const searchForm = reactive({ |
| | | orderNo: '', |
| | | customer: '', |
| | | status: '' |
| | | }) |
| | | // 响应式数据 |
| | | const loading = ref(false); |
| | | const searchForm = reactive({ |
| | | orderNo: "", |
| | | customer: "", |
| | | status: "", |
| | | }); |
| | | |
| | | const orderList = ref([ |
| | | { |
| | | id: 1, |
| | | orderNo: 'ORD202312001', |
| | | customer: '上海科技有限公司', |
| | | salesperson: '陈志强', |
| | | orderDate: '2023-12-01', |
| | | amount: 50000.00, |
| | | paymentMethod: '全款到付', |
| | | status: '待审核', |
| | | remark: '重要客户订单' |
| | | }, |
| | | { |
| | | id: 2, |
| | | orderNo: 'ORD202312002', |
| | | customer: '深圳电子有限公司', |
| | | salesperson: '刘雅婷', |
| | | orderDate: '2023-12-02', |
| | | amount: 35000.00, |
| | | paymentMethod: '分期付款', |
| | | status: '已审核', |
| | | remark: '常规订单' |
| | | }, |
| | | { |
| | | id: 3, |
| | | orderNo: 'ORD202312003', |
| | | customer: '北京贸易公司', |
| | | salesperson: '王建国', |
| | | orderDate: '2023-12-03', |
| | | amount: 28000.00, |
| | | paymentMethod: '月结', |
| | | status: '已发货', |
| | | remark: '新客户订单' |
| | | } |
| | | ]) |
| | | const orderList = ref([ |
| | | { |
| | | id: 1, |
| | | orderNo: "ORD202312001", |
| | | customer: "广州科技公司", |
| | | salesperson: "张三", |
| | | orderDate: "2023-12-01", |
| | | amount: 50000.0, |
| | | status: "待审核", |
| | | remark: "重要客户订单", |
| | | }, |
| | | { |
| | | id: 2, |
| | | orderNo: "ORD202312002", |
| | | customer: "深圳电子有限公司", |
| | | salesperson: "刘雅婷", |
| | | orderDate: "2023-12-02", |
| | | amount: 35000.0, |
| | | status: "已审核", |
| | | remark: "常规订单", |
| | | }, |
| | | { |
| | | id: 3, |
| | | orderNo: "ORD202312003", |
| | | customer: "北京贸易公司", |
| | | salesperson: "王建国", |
| | | orderDate: "2023-12-03", |
| | | amount: 28000.0, |
| | | status: "已发货", |
| | | remark: "新客户订单", |
| | | }, |
| | | ]); |
| | | |
| | | const pagination = reactive({ |
| | | total: 3, |
| | | currentPage: 1, |
| | | pageSize: 10 |
| | | }) |
| | | const pagination = reactive({ |
| | | total: 3, |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | }); |
| | | |
| | | const dialogVisible = ref(false) |
| | | const dialogTitle = ref('新增订单') |
| | | const form = reactive({ |
| | | customer: '', |
| | | salesperson: '', |
| | | orderDate: '', |
| | | amount: 0, |
| | | paymentMethod: '', |
| | | status: '待审核', |
| | | remark: '' |
| | | }) |
| | | const dialogVisible = ref(false); |
| | | const dialogTitle = ref("新增订单"); |
| | | const form = reactive({ |
| | | customer: "", |
| | | salesperson: "", |
| | | orderDate: "", |
| | | amount: 0, |
| | | status: "待审核", |
| | | remark: "", |
| | | }); |
| | | |
| | | const rules = { |
| | | customer: [{ required: true, message: '请选择客户', trigger: 'change' }], |
| | | salesperson: [{ required: true, message: '请选择业务员', trigger: 'change' }], |
| | | orderDate: [{ required: true, message: '请选择订单日期', trigger: 'change' }], |
| | | amount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }], |
| | | paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }], |
| | | status: [{ required: true, message: '请选择状态', trigger: 'change' }] |
| | | } |
| | | const rules = { |
| | | customer: [{ required: true, message: "请选择客户", trigger: "change" }], |
| | | salesperson: [{ required: true, message: "请选择业务员", trigger: "change" }], |
| | | orderDate: [{ required: true, message: "请选择订单日期", trigger: "change" }], |
| | | amount: [{ required: true, message: "请输入订单金额", trigger: "blur" }], |
| | | status: [{ required: true, message: "请选择状态", trigger: "change" }], |
| | | }; |
| | | |
| | | const isEdit = ref(false) |
| | | const editId = ref(null) |
| | | const reviewDialogVisible = ref(false) |
| | | const transferDialogVisible = ref(false) |
| | | const currentOrder = ref({}) |
| | | const reviewResult = ref('') |
| | | const reviewComment = ref('') |
| | | const newSalesperson = ref('') |
| | | const transferReason = ref('') |
| | | const formRef = ref() |
| | | const isEdit = ref(false); |
| | | const editId = ref(null); |
| | | const reviewDialogVisible = ref(false); |
| | | const transferDialogVisible = ref(false); |
| | | const currentOrder = ref({}); |
| | | const reviewResult = ref(""); |
| | | const reviewComment = ref(""); |
| | | const newSalesperson = ref(""); |
| | | const transferReason = ref(""); |
| | | const formRef = ref(); |
| | | |
| | | // 计算属性 |
| | | const filteredList = computed(() => { |
| | | let list = orderList.value |
| | | if (searchForm.orderNo) { |
| | | list = list.filter(item => item.orderNo.includes(searchForm.orderNo)) |
| | | } |
| | | if (searchForm.customer) { |
| | | list = list.filter(item => item.customer === searchForm.customer) |
| | | } |
| | | if (searchForm.status) { |
| | | list = list.filter(item => item.status === searchForm.status) |
| | | } |
| | | return list |
| | | }) |
| | | |
| | | // 方法 |
| | | const getStatusType = (status) => { |
| | | const statusMap = { |
| | | '待审核': 'warning', |
| | | '已审核': 'primary', |
| | | '已发货': 'success', |
| | | '已完成': 'success', |
| | | '已取消': 'danger' |
| | | } |
| | | return statusMap[status] || 'info' |
| | | } |
| | | |
| | | const handleSearch = () => { |
| | | // 搜索逻辑已在computed中处理 |
| | | } |
| | | |
| | | const resetSearch = () => { |
| | | searchForm.orderNo = '' |
| | | searchForm.customer = '' |
| | | searchForm.status = '' |
| | | } |
| | | |
| | | const handleAdd = () => { |
| | | dialogTitle.value = '新增订单' |
| | | isEdit.value = false |
| | | form.customer = '' |
| | | form.salesperson = '' |
| | | form.orderDate = '' |
| | | form.amount = 0 |
| | | form.paymentMethod = '' |
| | | form.status = '待审核' |
| | | 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 handleReview = (row) => { |
| | | currentOrder.value = row |
| | | reviewResult.value = '' |
| | | reviewComment.value = '' |
| | | reviewDialogVisible.value = true |
| | | } |
| | | |
| | | const handleTransfer = (row) => { |
| | | currentOrder.value = row |
| | | newSalesperson.value = '' |
| | | transferReason.value = '' |
| | | transferDialogVisible.value = true |
| | | } |
| | | |
| | | const handleCancel = (row) => { |
| | | ElMessageBox.confirm('确认取消该订单吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const index = orderList.value.findIndex(item => item.id === row.id) |
| | | if (index > -1) { |
| | | orderList.value[index].status = '已取消' |
| | | ElMessage.success('订单已取消') |
| | | // 计算属性 |
| | | const filteredList = computed(() => { |
| | | let list = orderList.value; |
| | | if (searchForm.orderNo) { |
| | | list = list.filter(item => item.orderNo.includes(searchForm.orderNo)); |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const handleDelete = (row) => { |
| | | ElMessageBox.confirm('确认删除该订单吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const index = orderList.value.findIndex(item => item.id === row.id) |
| | | if (index > -1) { |
| | | orderList.value.splice(index, 1) |
| | | pagination.total-- |
| | | ElMessage.success('删除成功') |
| | | if (searchForm.customer) { |
| | | list = list.filter(item => item.customer === searchForm.customer); |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const saveReview = () => { |
| | | if (!reviewResult.value) { |
| | | ElMessage.warning('请选择审核结果') |
| | | return |
| | | } |
| | | |
| | | const index = orderList.value.findIndex(item => item.id === currentOrder.value.id) |
| | | if (index > -1) { |
| | | if (reviewResult.value === '通过') { |
| | | orderList.value[index].status = '已审核' |
| | | ElMessage.success('订单审核通过') |
| | | } else { |
| | | orderList.value[index].status = '已取消' |
| | | ElMessage.success('订单审核拒绝') |
| | | if (searchForm.status) { |
| | | list = list.filter(item => item.status === searchForm.status); |
| | | } |
| | | reviewDialogVisible.value = false |
| | | } |
| | | } |
| | | return list; |
| | | }); |
| | | |
| | | const saveTransfer = () => { |
| | | if (!newSalesperson.value) { |
| | | ElMessage.warning('请选择新业务员') |
| | | return |
| | | } |
| | | |
| | | const index = orderList.value.findIndex(item => item.id === currentOrder.value.id) |
| | | if (index > -1) { |
| | | orderList.value[index].salesperson = newSalesperson.value |
| | | ElMessage.success('订单转单成功') |
| | | transferDialogVisible.value = false |
| | | } |
| | | } |
| | | // 方法 |
| | | const getStatusType = status => { |
| | | const statusMap = { |
| | | 待审核: "warning", |
| | | 已审核: "primary", |
| | | 已发货: "success", |
| | | 已完成: "success", |
| | | 已取消: "danger", |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }; |
| | | |
| | | const handleSubmit = () => { |
| | | formRef.value.validate((valid) => { |
| | | if (valid) { |
| | | if (isEdit.value) { |
| | | // 编辑 |
| | | const index = orderList.value.findIndex(item => item.id === editId.value) |
| | | if (index > -1) { |
| | | orderList.value[index] = { ...form, id: editId.value } |
| | | ElMessage.success('编辑成功') |
| | | } |
| | | } else { |
| | | // 新增 |
| | | const newId = Math.max(...orderList.value.map(item => item.id)) + 1 |
| | | const orderNo = `ORD${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}${String(newId).padStart(3, '0')}` |
| | | orderList.value.push({ |
| | | ...form, |
| | | id: newId, |
| | | orderNo: orderNo |
| | | }) |
| | | pagination.total++ |
| | | ElMessage.success('新增成功') |
| | | const handleSearch = () => { |
| | | // 搜索逻辑已在computed中处理 |
| | | }; |
| | | |
| | | const resetSearch = () => { |
| | | searchForm.orderNo = ""; |
| | | searchForm.customer = ""; |
| | | searchForm.status = ""; |
| | | }; |
| | | |
| | | const handleAdd = () => { |
| | | dialogTitle.value = "新增订单"; |
| | | isEdit.value = false; |
| | | form.customer = ""; |
| | | form.salesperson = ""; |
| | | form.orderDate = ""; |
| | | form.amount = 0; |
| | | form.status = "待审核"; |
| | | 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 handleReview = row => { |
| | | currentOrder.value = row; |
| | | reviewResult.value = ""; |
| | | reviewComment.value = ""; |
| | | reviewDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleTransfer = row => { |
| | | currentOrder.value = row; |
| | | newSalesperson.value = ""; |
| | | transferReason.value = ""; |
| | | transferDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleCancel = row => { |
| | | ElMessageBox.confirm("确认取消该订单吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(() => { |
| | | const index = orderList.value.findIndex(item => item.id === row.id); |
| | | if (index > -1) { |
| | | orderList.value[index].status = "已取消"; |
| | | ElMessage.success("订单已取消"); |
| | | } |
| | | dialogVisible.value = false |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleCurrentChange = (val) => { |
| | | pagination.currentPage = val.page |
| | | pagination.pageSize = val.limit |
| | | } |
| | | const handleDelete = row => { |
| | | ElMessageBox.confirm("确认删除该订单吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(() => { |
| | | const index = orderList.value.findIndex(item => item.id === row.id); |
| | | if (index > -1) { |
| | | orderList.value.splice(index, 1); |
| | | pagination.total--; |
| | | ElMessage.success("删除成功"); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const saveReview = () => { |
| | | if (!reviewResult.value) { |
| | | ElMessage.warning("请选择审核结果"); |
| | | return; |
| | | } |
| | | |
| | | const index = orderList.value.findIndex( |
| | | item => item.id === currentOrder.value.id |
| | | ); |
| | | if (index > -1) { |
| | | if (reviewResult.value === "通过") { |
| | | orderList.value[index].status = "已审核"; |
| | | ElMessage.success("订单审核通过"); |
| | | } else { |
| | | orderList.value[index].status = "已取消"; |
| | | ElMessage.success("订单审核拒绝"); |
| | | } |
| | | reviewDialogVisible.value = false; |
| | | } |
| | | }; |
| | | |
| | | const saveTransfer = () => { |
| | | if (!newSalesperson.value) { |
| | | ElMessage.warning("请选择新业务员"); |
| | | return; |
| | | } |
| | | |
| | | const index = orderList.value.findIndex( |
| | | item => item.id === currentOrder.value.id |
| | | ); |
| | | if (index > -1) { |
| | | orderList.value[index].salesperson = newSalesperson.value; |
| | | ElMessage.success("订单转单成功"); |
| | | transferDialogVisible.value = false; |
| | | } |
| | | }; |
| | | |
| | | const handleSubmit = () => { |
| | | formRef.value.validate(valid => { |
| | | if (valid) { |
| | | if (isEdit.value) { |
| | | // 编辑 |
| | | const index = orderList.value.findIndex( |
| | | item => item.id === editId.value |
| | | ); |
| | | if (index > -1) { |
| | | orderList.value[index] = { ...form, id: editId.value }; |
| | | ElMessage.success("编辑成功"); |
| | | } |
| | | } else { |
| | | // 新增 |
| | | const newId = Math.max(...orderList.value.map(item => item.id)) + 1; |
| | | const orderNo = `ORD${new Date().getFullYear()}${String( |
| | | new Date().getMonth() + 1 |
| | | ).padStart(2, "0")}${String(new Date().getDate()).padStart( |
| | | 2, |
| | | "0" |
| | | )}${String(newId).padStart(3, "0")}`; |
| | | orderList.value.push({ |
| | | ...form, |
| | | id: newId, |
| | | orderNo: orderNo, |
| | | }); |
| | | pagination.total++; |
| | | ElMessage.success("新增成功"); |
| | | } |
| | | dialogVisible.value = false; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleCurrentChange = val => { |
| | | pagination.currentPage = val.page; |
| | | pagination.pageSize = val.limit; |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .search-row { |
| | | margin-bottom: 20px; |
| | | } |
| | | .search-row { |
| | | margin-bottom: 20px; |
| | | } |
| | | </style> |