|
|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <!-- 数据订单 -->
|
|
|
+ <div class="pa-3 white">
|
|
|
+ <m-filter :option="filter" @search="handleSearch" />
|
|
|
+ <table-list
|
|
|
+ class="mt-3"
|
|
|
+ :loading="loading"
|
|
|
+ :headers="headers"
|
|
|
+ :items="items"
|
|
|
+ :total="total"
|
|
|
+ :page-info="pageInfo"
|
|
|
+ :is-tools="true"
|
|
|
+ :disable-sort="true"
|
|
|
+ :can-delete="false"
|
|
|
+ :show-select="false"
|
|
|
+ @add="handleAdd"
|
|
|
+ @pageHandleChange="pageHandleChange"
|
|
|
+ >
|
|
|
+ <template #actions="{ item }">
|
|
|
+ <v-btn text color="success" @click="handleEdit(item)">编辑</v-btn>
|
|
|
+ <v-btn text color="error" @click="handleDelete(item)">删除</v-btn>
|
|
|
+ </template>
|
|
|
+ </table-list>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import MFilter from '@/components/Filter'
|
|
|
+import TableList from '@/components/List/table'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'dataOrder',
|
|
|
+ components: {
|
|
|
+ MFilter,
|
|
|
+ TableList
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ filter: {
|
|
|
+ list: [
|
|
|
+ { type: 'textField', value: '', label: '关键词', key: 'search', placeholder: '搜索订单信息' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ headers: [
|
|
|
+ { text: '订单编号', value: 'order_no' },
|
|
|
+ { text: '订单名称', value: 'order_name' },
|
|
|
+ { text: '创建时间', value: 'created_at' },
|
|
|
+ { text: '操作', value: 'actions', align: 'center' }
|
|
|
+ ],
|
|
|
+ items: [],
|
|
|
+ total: 0,
|
|
|
+ pageInfo: {
|
|
|
+ size: 20,
|
|
|
+ current: 1
|
|
|
+ },
|
|
|
+ query: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async init () {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ page: this.pageInfo.current,
|
|
|
+ page_size: this.pageInfo.size,
|
|
|
+ ...this.query
|
|
|
+ }
|
|
|
+ // 移除空值
|
|
|
+ Object.keys(params).forEach(key => {
|
|
|
+ if (params[key] === '' || params[key] === null || params[key] === undefined) {
|
|
|
+ delete params[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // TODO: 调用数据订单API
|
|
|
+ // const { data } = await api.getOrders(params)
|
|
|
+ // this.total = data.pagination.total
|
|
|
+ // this.items = data.list
|
|
|
+ this.items = []
|
|
|
+ this.total = 0
|
|
|
+ } catch (error) {
|
|
|
+ this.$snackbar.error(error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSearch (obj) {
|
|
|
+ Object.assign(this.query, obj)
|
|
|
+ this.pageInfo.current = 1
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ pageHandleChange (index) {
|
|
|
+ this.pageInfo.current = index
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ handleAdd () {
|
|
|
+ // TODO: 新增订单
|
|
|
+ this.$snackbar.info('功能开发中')
|
|
|
+ },
|
|
|
+ handleEdit (item) {
|
|
|
+ // TODO: 编辑订单
|
|
|
+ this.$snackbar.info('功能开发中')
|
|
|
+ },
|
|
|
+ async handleDelete (item) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('删除确认', '确定要删除该订单吗？此操作不可恢复。')
|
|
|
+ // TODO: 调用删除API
|
|
|
+ // await api.deleteOrder(item.id)
|
|
|
+ this.$snackbar.success('删除成功')
|
|
|
+ this.init()
|
|
|
+ } catch (error) {
|
|
|
+ if (error !== 'cancel') {
|
|
|
+ this.$snackbar.error(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
Xiao_123