Files
management/src/views/orderInfo/index.vue
2024-04-24 09:52:04 +08:00

225 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<label class="el-form-item-label">id</label>
<el-input v-model="query.id" clearable placeholder="id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">订单编号</label>
<el-input v-model="query.orderNo" clearable placeholder="订单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">商品售价</label>
<el-input v-model="query.productAmount" clearable placeholder="商品售价" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">支付金额</label>
<el-input v-model="query.payAmount" clearable placeholder="支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">现金支付金额</label>
<el-input v-model="query.cashPaidAmount" clearable placeholder="现金支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">微信支付金额</label>
<el-input v-model="query.wxPaidAmount" clearable placeholder="微信支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">支付宝支付金额</label>
<el-input v-model="query.aliPaidAmount" clearable placeholder="支付宝支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">储值支付金额</label>
<el-input v-model="query.depositPaidAmount" clearable placeholder="储值支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">银联支付金额</label>
<el-input v-model="query.bankPaidAmount" clearable placeholder="银联支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">虚拟支付金额</label>
<el-input v-model="query.virtualPaidAmount" clearable placeholder="虚拟支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">其他支付金额</label>
<el-input v-model="query.otherPaidAmount" clearable placeholder="其他支付金额" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">发货类型</label>
<el-input v-model="query.sendType" clearable placeholder="发货类型" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">状态</label>
<el-input v-model="query.status" clearable placeholder="状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">店铺Id</label>
<el-input v-model="query.shopId" clearable placeholder="店铺Id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">商户会员Id</label>
<el-input v-model="query.memberId" clearable placeholder="商户会员Id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">用户Id</label>
<el-input v-model="query.userId" clearable placeholder="用户Id" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">支付时间</label>
<el-input v-model="query.paidTime" clearable placeholder="支付时间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">createdAt</label>
<el-input v-model="query.createdAt" clearable placeholder="createdAt" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<label class="el-form-item-label">收银台是否已接单</label>
<el-input v-model="query.isAccepted" clearable placeholder="收银台是否已接单" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation :crud="crud" />
</div>
<!--如果想在工具栏加入更多按钮可以使用插槽方式 slot = 'left' or 'right'-->
<crudOperation :permission="permission" />
<!--表单组件-->
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="id">
<el-input v-model="form.id" style="width: 370px;" />
</el-form-item>
<el-form-item label="订单编号">
<el-input v-model="form.orderNo" style="width: 370px;" />
</el-form-item>
<el-form-item label="商品售价">
<el-input v-model="form.productAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="支付金额">
<el-input v-model="form.payAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="现金支付金额">
<el-input v-model="form.cashPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="微信支付金额">
<el-input v-model="form.wxPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="支付宝支付金额">
<el-input v-model="form.aliPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="储值支付金额">
<el-input v-model="form.depositPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="银联支付金额">
<el-input v-model="form.bankPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="虚拟支付金额">
<el-input v-model="form.virtualPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="其他支付金额">
<el-input v-model="form.otherPaidAmount" style="width: 370px;" />
</el-form-item>
<el-form-item label="发货类型">
<el-input v-model="form.sendType" style="width: 370px;" />
</el-form-item>
<el-form-item label="状态">
<el-input v-model="form.status" style="width: 370px;" />
</el-form-item>
<el-form-item label="店铺Id">
<el-input v-model="form.shopId" style="width: 370px;" />
</el-form-item>
<el-form-item label="商户会员Id">
<el-input v-model="form.memberId" style="width: 370px;" />
</el-form-item>
<el-form-item label="用户Id">
<el-input v-model="form.userId" style="width: 370px;" />
</el-form-item>
<el-form-item label="支付时间">
<el-input v-model="form.paidTime" style="width: 370px;" />
</el-form-item>
<el-form-item label="createdAt">
<el-input v-model="form.createdAt" style="width: 370px;" />
</el-form-item>
<el-form-item label="收银台是否已接单">
<el-input v-model="form.isAccepted" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="id" />
<el-table-column prop="orderNo" label="订单编号" />
<el-table-column prop="productAmount" label="商品售价" />
<el-table-column prop="payAmount" label="支付金额" />
<el-table-column prop="cashPaidAmount" label="现金支付金额" />
<el-table-column prop="wxPaidAmount" label="微信支付金额" />
<el-table-column prop="aliPaidAmount" label="支付宝支付金额" />
<el-table-column prop="depositPaidAmount" label="储值支付金额" />
<el-table-column prop="bankPaidAmount" label="银联支付金额" />
<el-table-column prop="virtualPaidAmount" label="虚拟支付金额" />
<el-table-column prop="otherPaidAmount" label="其他支付金额" />
<el-table-column prop="sendType" label="发货类型">
<template slot-scope="scope">
{{ dict.label.order_send_type[scope.row.sendType] }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ dict.label.order_status[scope.row.status] }}
</template>
</el-table-column>
<el-table-column prop="shopId" label="店铺Id" />
<el-table-column prop="memberId" label="商户会员Id" />
<el-table-column prop="userId" label="用户Id" />
<el-table-column prop="paidTime" label="支付时间" />
<el-table-column prop="createdAt" label="createdAt" />
<el-table-column prop="isAccepted" label="收银台是否已接单">
<template slot-scope="scope">
{{ dict.label.is_accepted[scope.row.isAccepted] }}
</template>
</el-table-column>
<el-table-column v-if="checkPer(['admin','tbOrderInfo:edit','tbOrderInfo:del'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination />
</div>
</div>
</template>
<script>
import crudTbOrderInfo from '@/api/tbOrderInfo'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
const defaultForm = { id: null, orderNo: null, settlementAmount: null, packFee: null, originAmount: null, productAmount: null, amount: null, refundAmount: null, payAmount: null, freightAmount: null, cashPaidAmount: null, wxPaidAmount: null, aliPaidAmount: null, depositPaidAmount: null, bankPaidAmount: null, virtualPaidAmount: null, otherPaidAmount: null, discountAmount: null, tableId: null, smallChange: null, sendType: null, orderType: null, productType: null, status: null, billingId: null, merchantId: null, shopId: null, isVip: null, memberId: null, userId: null, productScore: null, deductScore: null, userCouponId: null, userCouponAmount: null, isMaster: null, masterId: null, refundAble: null, paidTime: null, isEffect: null, isGroup: null, updatedAt: null, systemTime: null, createdAt: null, isAccepted: null }
export default {
name: 'TbOrderInfo',
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
dicts: ['order_send_type', 'order_status', 'is_accepted'],
cruds() {
return CRUD({ title: '/orderInfo', url: 'api/tbOrderInfo', idField: 'id', sort: 'id,desc', crudMethod: { ...crudTbOrderInfo }})
},
data() {
return {
permission: {
add: ['admin', 'tbOrderInfo:add'],
edit: ['admin', 'tbOrderInfo:edit'],
del: ['admin', 'tbOrderInfo:del']
},
rules: {
},
queryTypeOptions: [
{ key: 'id', display_name: 'id' },
{ key: 'orderNo', display_name: '订单编号' },
{ key: 'productAmount', display_name: '商品售价' },
{ key: 'payAmount', display_name: '支付金额' },
{ key: 'cashPaidAmount', display_name: '现金支付金额' },
{ key: 'wxPaidAmount', display_name: '微信支付金额' },
{ key: 'aliPaidAmount', display_name: '支付宝支付金额' },
{ key: 'depositPaidAmount', display_name: '储值支付金额' },
{ key: 'bankPaidAmount', display_name: '银联支付金额' },
{ key: 'virtualPaidAmount', display_name: '虚拟支付金额' },
{ key: 'otherPaidAmount', display_name: '其他支付金额' },
{ key: 'sendType', display_name: '发货类型' },
{ key: 'status', display_name: '状态' },
{ key: 'shopId', display_name: '店铺Id' },
{ key: 'memberId', display_name: '商户会员Id' },
{ key: 'userId', display_name: '用户Id' },
{ key: 'paidTime', display_name: '支付时间' },
{ key: 'createdAt', display_name: 'createdAt' },
{ key: 'isAccepted', display_name: '收银台是否已接单' }
]
}
},
methods: {
// 钩子在获取表格数据之前执行false 则代表不获取数据
[CRUD.HOOK.beforeRefresh]() {
return true
}
}
}
</script>
<style scoped>
</style>