管理端ba订单列表

backendEle/src/views/shop/ba-order-list.vue

@@ -0,0 +1,253 @@
+<template>
+  <div v-loading="loading">
+    <div class="white-box">
+      <div class="filter-box">
+        <filter-user :filter-types="filterTypes" @select-value="handleFilterUser"></filter-user>
+      </div>
+      <el-table class="table-box" ref="multipleTable" :data="tableData" stripe style="width: 100%;"
+                @selection-change="handleSelectionChange"
+                :height="tool.getTableHeight()">
+        <el-table-column type="selection" width="70" v-if="tableHeaders"></el-table-column>
+        <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''" :prop="tableHeader.other.prop ? tableHeader.other.prop : null">
+          <template slot-scope="scope">
+            <template v-if="scope.row[tableHeader.index].other.tag" >
+              <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
+            </template>
+            <template v-else>
+              <div v-html="scope.row[tableHeader.index].value"></div>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="Action" width="180">&lt;!&ndash; 操作 &ndash;&gt;
+         <template slot-scope="scope">
+            <el-dropdown size="small" trigger="click">
+              <el-button type="primary" size="small" @click.stop="">
+                Action<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="edit" @click.native="handleDel(scope.row)" v-if="permission.hasPermission(`shop/edit`)">Delete order</el-dropdown-item>
+                <!-- <el-dropdown-item command="edit" @click.native="handleEdit(scope.row)" v-if="permission.hasPermission(`shop/edit`)">Edit order&lt;!&ndash; 编辑订单 &ndash;&gt;</el-dropdown-item>
+                <el-dropdown-item command="delivery" @click.native="handleShowDeliveryDialog(scope.row)" v-if="permission.hasPermission(`shop/order-delivery`) && scope.row['STATUS'] === '1' && scope.row['DELIVERY_STATUS'] === '0' ">deliver goods&lt;!&ndash; 发货 &ndash;&gt;</el-dropdown-item>
+                <el-dropdown-item command="refund" @click.native="handleRefund(scope.row.SN)" v-if="permission.hasPermission(`shop/order-delivery`) && scope.row['PAY_TYPE'] === 'pay_stack' && scope.row['STATUS'] === '1' && scope.row['DELIVERY_STATUS'] === '0' ">Refund&lt;!&ndash; 退款 &ndash;&gt;</el-dropdown-item> -->
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="white-box-footer">
+        <el-button type="success" size="small" @click="handleExport" v-show="permission.hasPermission(`shop/ba-order-list-export`)">Export Excel</el-button>
+        <el-button type="primary" size="small" @click="handleExportPDF" v-show="permission.hasPermission(`shop/ba-order-list-export`)">Export PDF</el-button>
+        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"></pagination>
+      </div>
+    </div>
+
+    <el-dialog title="deliver goods" :visible.sync="dialogDeliveryVisible"><!-- 发货 -->
+      <el-form :model="deliveryForm" label-width="150px" class="form-dialog">
+        <el-form-item label="Courier Services Company"><!-- 快递公司 -->
+          <el-input v-model="deliveryForm.expressCompany"></el-input>
+        </el-form-item>
+        <el-form-item label="courier number"><!-- 快递单号 -->
+          <el-input v-model="deliveryForm.orderTrackNo"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogDeliveryVisible = false">Cancel<!-- 取 消 --></el-button>
+        <el-button type="primary" @click.native="handleDelivery">deliver goods<!-- 发货 --></el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import network from '@/utils/network'
+import tool from '@/utils/tool'
+import baseInfo from '@/utils/baseInfo'
+import FilterUser from '@/components/FilterUser'
+import permission from '@/utils/permission'
+import Pagination from '@/components/Pagination'
+import filterHelper from '@/utils/filterHelper'
+
+export default {
+  name: 'shop_order-list',
+  components: {FilterUser, Pagination},
+  mounted () {
+    this.getData()
+  },
+  data () {
+    return {
+      tableHeaders: null,
+      tableData: null,
+      tableHeight: window.innerHeight - 310,
+      loading: true,
+      multipleSelection: [],
+      currentPage: 1,
+      totalPages: 1,
+      totalCount: 1,
+      pageSize: 20,
+      tool: tool,
+      permission: permission,
+      filterTypes: null,
+      filterModel: {},
+      dialogDeliveryVisible: false,
+      deliveryForm: {
+        sn: '',
+        expressCompany: '',
+        orderTrackNo: ''
+      }
+    }
+  },
+  methods: {
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    handleCurrentChange (page) {
+      this.getData(page, this.pageSize)
+    },
+    handleSizeChange (pageSize) {
+      this.getData(this.currentPage, pageSize)
+    },
+    handleFilterUser (filterData) {
+      filterHelper.handleFilterUser(this, filterData)
+    },
+    getData (page, pageSize) {
+      let filterData = this.filterModel
+      network.getPageData(this, 'shop/ba-order-list', page, pageSize, filterData, response => {
+        this.filterTypes = response.filterTypes
+        this.allData = response
+      })
+    },
+    handleExport () {
+      this.$confirm(`Are you sure you want to export the current data？`, 'Hint', { // `确定要导出当前数据吗？`, '提示'
+        confirmButtonText: 'confirm', // 确定
+        cancelButtonText: 'cancel', // 取消
+        type: 'warning'
+      }).then(() => {
+        return network.getData(`shop/order-list-export`, this.filterModel)
+      }).then(response => {
+        this.$message({
+          message: response,
+          type: 'success'
+        })
+      }).catch(response => {
+
+      })
+    },
+    handleExportPDF () {
+      if (this.multipleSelection.length === 0) {
+        this.$message({
+          message: 'Please select an order to export', // 请选择一条订单导出
+          type: 'error'
+        })
+        return false
+      }
+
+      // 提取订单ID
+      let orderSnList = this.multipleSelection.map((item) => item.SN.value || '')
+      // 去重
+      let orderSnSet = Array.from(new Set(orderSnList))
+      if (orderSnSet.length !== 1) {
+        this.$message({
+          message: 'Only one order can be exported at a time', // 每次只能导出一条订单
+          type: 'error'
+        })
+        return false
+      }
+
+      this.$confirm(`Are you sure you want to export the current data？`, 'Hint', { // `确定要导出当前数据吗？`, '提示'
+        confirmButtonText: 'confirm', // 确定
+        cancelButtonText: 'cancel', // 取消
+        type: 'info'
+      }).then(() => {
+        // 导出时只需要订单ID即可
+        let orderSn = orderSnSet[0]
+        network.getData(`shop/order-list-export-pdf/${orderSn}`).then(response => {
+          this.$message({
+            message: response,
+            type: 'success'
+          })
+        })
+      }).catch(response => {
+        this.$message({
+          message: response,
+          type: 'error'
+        })
+      })
+    },
+    handleEdit () {
+      // 进入修改订单页面
+    },
+    handleDel (row) {
+      let orderSn = row.SN.value // order订单表的编号
+      this.$confirm(`确定要删除订单：${orderSn}吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 删除订单
+        let postData = {
+          orderSn
+        }
+        return network.postData('shop/delete-order', postData).then(response => {
+          console.log(response)
+          this.$message({
+            message: response,
+            type: 'success'
+          })
+          this.submitButtonStat = false
+          this.$router.go(0)
+        }).catch(() => {
+          this.submitButtonStat = false
+        })
+      }).then(response => {
+
+      }).catch(response => {
+
+      })
+    },
+    // 显示发货对话框
+    handleShowDeliveryDialog (row) {
+      this.dialogDeliveryVisible = true
+      this.deliveryForm.sn = row['SN'].value
+    },
+    // 发货
+    handleDelivery () {
+      network.postData('shop/order-delivery', this.deliveryForm).then(response => {
+        this.$message({
+          message: response,
+          type: 'success'
+        })
+        this.dialogDeliveryVisible = false
+        this.getData(this.currentPage, this.pageSize)
+      }).catch(response => {
+        this.dialogDeliveryVisible = false
+      })
+    },
+    // 退款
+    handleRefund (orderSn) {
+      this.$confirm(`Are you sure you want to refund this order？`, 'Hint', { // `确定要将此订单退款吗？`, '提示',
+        confirmButtonText: 'confirm', // 确定
+        cancelButtonText: 'cancel', // 取消
+        type: 'warning'
+      }).then(() => {
+        return network.postData(`shop/order-refund`, { sn: orderSn.value })
+      }).then(response => {
+        this.$message({
+          message: response,
+          type: 'success'
+        })
+        this.getData(this.currentPage, this.pageSize)
+      }).catch(response => {
+        this.$message({
+          message: response,
+          type: 'error'
+        })
+      })
+    }
+  }
+}
+
+</script>
+
+<style scoped>
+</style>