|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud
|
|
|
+ :option="option"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="data"
|
|
|
+ :page.sync="page"
|
|
|
+ :permission="permissionList"
|
|
|
+ :before-open="beforeOpen"
|
|
|
+ v-model="form"
|
|
|
+ ref="crud"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @on-load="onLoad"
|
|
|
+ @row-update="rowUpdate"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-del="rowDel"
|
|
|
+ >
|
|
|
+ <!-- 自定义左侧菜单按钮 -->
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ v-if="permission.order_order_add"
|
|
|
+ @click="handleAdd"
|
|
|
+ >
|
|
|
+ 新增订单
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ v-if="permission.order_order_delete"
|
|
|
+ @click="handleBatchDelete"
|
|
|
+ :disabled="selectionList.length === 0"
|
|
|
+ >
|
|
|
+ 批量删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单类型显示 -->
|
|
|
+ <template slot="orderType" slot-scope="{row}">
|
|
|
+ <el-tag :type="getOrderTypeTagType(row.orderType)">
|
|
|
+ {{ getOrderTypeLabel(row.orderType) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单总金额显示 -->
|
|
|
+ <template slot="totalAmount" slot-scope="{row}">
|
|
|
+ ¥{{ parseFloat(row.totalAmount || 0).toFixed(2) }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单总数量显示 -->
|
|
|
+ <template slot="totalQuantity" slot-scope="{row}">
|
|
|
+ {{ parseFloat(row.totalQuantity || 0).toFixed(4) }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 订单状态显示 -->
|
|
|
+ <template slot="status" slot-scope="{row}">
|
|
|
+ <el-tag :type="getOrderStatusTagType(row.status)">
|
|
|
+ {{ getOrderStatusLabel(row.status) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 自定义操作菜单 -->
|
|
|
+ <template slot-scope="{row}" slot="menu">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-view"
|
|
|
+ @click="handleView(row)"
|
|
|
+ >
|
|
|
+ 查看
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-document"
|
|
|
+ @click="handleItemManagement(row)"
|
|
|
+ >
|
|
|
+ 明细管理
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(row)"
|
|
|
+ v-if="permission.order_order_delete"
|
|
|
+ style="color: #f56c6c"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+
|
|
|
+ <!-- 订单明细管理弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="订单明细管理"
|
|
|
+ :visible.sync="itemDialogVisible"
|
|
|
+ width="1200px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :modal="true"
|
|
|
+ :modal-append-to-body="true"
|
|
|
+ :append-to-body="true"
|
|
|
+ custom-class="order-item-dialog"
|
|
|
+ >
|
|
|
+ <order-item-management
|
|
|
+ v-if="itemDialogVisible"
|
|
|
+ :order-info="currentOrderInfo"
|
|
|
+ :visible="itemDialogVisible"
|
|
|
+ @close="handleItemDialogClose"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ </basic-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { option } from './option'
|
|
|
+import { getList, add, update, remove, getDetail } from '@/api/order/order'
|
|
|
+import {
|
|
|
+ ORDER_TYPE_LABELS,
|
|
|
+ ORDER_STATUS_LABELS,
|
|
|
+ ORDER_TYPE_TAG_TYPES,
|
|
|
+ ORDER_STATUS_TAG_TYPES,
|
|
|
+ getOrderTypeLabel,
|
|
|
+ getOrderTypeTagType,
|
|
|
+ getOrderStatusLabel,
|
|
|
+ getOrderStatusTagType
|
|
|
+} from './constants'
|
|
|
+import OrderItemManagement from '@/components/order-item-management'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'OrderAvue',
|
|
|
+ components: {
|
|
|
+ OrderItemManagement
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option,
|
|
|
+ data: [],
|
|
|
+ form: {},
|
|
|
+ loading: true,
|
|
|
+ selectionList: [],
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ itemDialogVisible: false,
|
|
|
+ currentOrderId: null,
|
|
|
+ currentOrderInfo: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['permission']),
|
|
|
+ permissionList() {
|
|
|
+ return {
|
|
|
+ addBtn: this.permission.order_order_add,
|
|
|
+ viewBtn: this.permission.order_order_view,
|
|
|
+ editBtn: this.permission.order_order_edit,
|
|
|
+ delBtn: this.permission.order_order_delete
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // Avue.js 事件处理
|
|
|
+ onLoad(page, params = {}) {
|
|
|
+ this.loading = true
|
|
|
+ getList(page.currentPage, page.pageSize, params).then(res => {
|
|
|
+ const data = res.data.data
|
|
|
+ this.data = data.records
|
|
|
+ this.page.total = data.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ searchChange(params, done) {
|
|
|
+ this.onLoad(this.page, params)
|
|
|
+ done()
|
|
|
+ },
|
|
|
+
|
|
|
+ searchReset() {
|
|
|
+ this.onLoad(this.page)
|
|
|
+ },
|
|
|
+
|
|
|
+ selectionChange(list) {
|
|
|
+ this.selectionList = list
|
|
|
+ },
|
|
|
+
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.page.currentPage = currentPage
|
|
|
+ },
|
|
|
+
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.page.pageSize = pageSize
|
|
|
+ },
|
|
|
+
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoad(this.page)
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeOpen(done, type) {
|
|
|
+ if (type === 'add') {
|
|
|
+ this.form = {
|
|
|
+ orderType: 1,
|
|
|
+ status: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ done()
|
|
|
+ },
|
|
|
+
|
|
|
+ rowSave(row, done, loading) {
|
|
|
+ add(row).then(() => {
|
|
|
+ this.$message.success('新增成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ done()
|
|
|
+ }).catch(() => {
|
|
|
+ loading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ rowUpdate(row, index, done, loading) {
|
|
|
+ update(row).then(() => {
|
|
|
+ this.$message.success('修改成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ done()
|
|
|
+ }).catch(() => {
|
|
|
+ loading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ rowDel(row) {
|
|
|
+ this.$confirm('确定将选择数据删除?', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ return remove(row.id)
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 自定义操作方法
|
|
|
+ handleAdd() {
|
|
|
+ this.$refs.crud.rowAdd()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleView(row) {
|
|
|
+ this.$refs.crud.rowView(row)
|
|
|
+ },
|
|
|
+
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确定删除该订单吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ return remove(row.id)
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleBatchDelete() {
|
|
|
+ if (this.selectionList.length === 0) {
|
|
|
+ this.$message.warning('请选择要删除的数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$confirm('确定删除选中的订单吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ const ids = this.selectionList.map(item => item.id).join(',')
|
|
|
+ return remove(ids)
|
|
|
+ }).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.onLoad(this.page)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleItemManagement(row) {
|
|
|
+ this.currentOrderId = row.id
|
|
|
+ this.currentOrderInfo = {
|
|
|
+ id: row.id,
|
|
|
+ orderCode: row.orderCode,
|
|
|
+ customerName: row.customerName,
|
|
|
+ status: row.status
|
|
|
+ }
|
|
|
+ this.itemDialogVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ handleItemDialogClose() {
|
|
|
+ this.itemDialogVisible = false
|
|
|
+ this.currentOrderId = null
|
|
|
+ this.currentOrderInfo = null
|
|
|
+ },
|
|
|
+
|
|
|
+ // 工具方法
|
|
|
+ getOrderTypeLabel,
|
|
|
+ getOrderTypeTagType,
|
|
|
+ getOrderStatusLabel,
|
|
|
+ getOrderStatusTagType
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.order-item-dialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yz