订单管理接口调整

zhaoxiaoqiang

2023-09-01 ecad399599cc91ebd70e2ed45262ca1579cbf9d2

 src/views/qyp-project-order/history.vue

@@ -1,32 +1,275 @@

<!--
 * @Author: zhaoxiaoqiang 287285524@qq.com
 * @Date: 2023-08-24 15:16:23
 * @LastEditors: zhaoxiaoqiang 287285524@qq.com
 * @LastEditTime: 2023-08-24 16:57:47
 * @LastEditTime: 2023-09-01 11:19:29
 * @FilePath: \qyp_plat\src\views\qyp-project-order\history.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
       12121212
        <el-form
            :model="formInline"
            inline
            label-width="100px"
            class="form-flex"
            size="small"
        >
            <div style="width: 90%">
                <el-form-item label="支付订单号：">
                    <el-input
                        v-model.trim="formInline.tradeNo"
                        style="width: 240px"
                        @keyup.native="keyupEvent($event)"
                        type="tel"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="支付时间：">
                    <el-date-picker
                        v-model="createdTime"
                        style="width: 240px"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="支付状态：">
                        <el-select
                            v-model="formInline.payStatus"
                            style="width:240px"
                            clearable
                            placeholder="请选择"
                        >
                            <el-option label="全部" value="all"></el-option>
                            <el-option
                            v-for="item in relustObj.payStatusList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                            ></el-option>
                        </el-select>
                </el-form-item>
            </div>
            <el-form-item style="text-align: right;">
                <el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;"  @click="onSearch">查 询</el-button>
            </el-form-item>
        </el-form>
        <Etable
            hasIndex
            httpUrl="payList"
            :columns="columns"
            :searchData="searchData"
            :exportUrl="{
                url: '/qyp/order/payExport',
                powerId: '',
                name: '支付历史',
            }"
            >
        </Etable>
        <el-dialog top="2vh"  title="退款" append-to-body :visible.sync="productShow" width="40%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="100px" class="demo-ruleForm">
                <el-form-item label="退款类型" prop="refundType">
                    <el-radio-group v-model="ruleForm.refundType">
                        <el-radio  v-for="item in  relustObj.refundTypeList" :disabled="!item.selected" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="退款金额" prop="refundAmount">
                    <el-input v-model="ruleForm.refundAmount" placeholder="请输入退款金额"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {payInit,refund} from "@/api/credit";
import Etable from "@/components/table.vue";
export default {
    components: { Etable },
    data() {
        return {
            productShow:false,
            formInline:{},
            searchData:{},
            createdTime:[],
            relustObj:{},
            columns:[
                {
                    lable: "支付订单号",
                    prop: "tradeNo",
                    align: "center",
                    width: "300",
                },
                {
                    lable: "支付时间",
                    prop: "payTime",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "支付状态",
                    prop: "payStatusStr",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "支付金额",
                    prop: "payAmount",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "停车券退款状态",
                    prop: "tcjRefundStatusStr",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "停车券退款金额",
                    prop: "tcjRefundAmount",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "停车券退款时间",
                    prop: "tcjRefundTime",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "权益会员退款状态",
                    prop: "refundStatusStr",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "权益会员退款金额",
                    prop: "refundAmount",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "权益会员退款时间",
                    prop: "refundTime",
                    align: "center",
                    width: "180",
                },
                {
                    lable: "操作",
                    align: "center",
                    width: "200",
                    fixed: "right",
                    render: (h, scope) => {
                    return h("div", [
                        h(
                            "el-button",
                            {
                            props:{
                                type:'text',
                                disabled:!scope.row.canRefund&&!scope.row.tcjCanRefund
                            },
                            style: {
                                // display: this.filterBtnById(150101)
                                //   ? "inline-block"
                                //   : "none",
                            },
                            on: {
                                click: () => {
                                    let {canRefund,tcjCanRefund,payId} = scope.row;
                                    this.ruleForm.payId = payId;
                                    this.relustObj.refundTypeList.forEach(element => {
                                        if(element.code==1){
                                            element.selected = canRefund;
                                        }
                                        if(element.code==2){
                                            element.selected = tcjCanRefund;
                                        }
                                    });
                                    this.productShow = true;
                                },
                            },
                            },
                            "退款"
                        )
                    ]);
                },
            },

            ],
            ruleForm:{},
            rules:{
                refundType: [
                    { required: true, message: '请选择退款类型', trigger: 'change' }
                ],
                refundAmount: [{ required: true, message: '请输入退款金额', trigger: 'blur' }]  
            }
        };
    },
    created() {

    watch:{
        productShow:{
            handler: function(val) {
                if(!val){
                    this.$refs['ruleForm'].resetFields(); 
                }
            },
            deep: true
        }
    },
    mounted() {

    created() {
     this.initSerch();
    },
    methods: {

        keyupEvent(e) {
            //只能输入整数
            e.target.value = e.target.value.replace(/[^\d]/g, "");
        },
        initSerch() {
            payInit().then(({ body }) => {
               this.relustObj = body;
            });
        },
        onSearch() {
            this.formInline.payStartTime = this.createdTime[0]?this.createdTime[0]:null;
            this.formInline.payEndTime = this.createdTime[1]?this.createdTime[1]:null;
            let objForm = JSON.parse(JSON.stringify(this.formInline));
            for (let key in objForm) {
                if (objForm[key] === "all"||objForm[key] === null||objForm[key] === '') {
                    delete objForm[key];
                }
            }
            this.searchData = { ...objForm };
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                refund(this.ruleForm).then(({body})=>{
                    this.$message.success("退款成功");
                    this.onSearch();
                    this.productShow = false;
                }).catch(err=>{
                    this.productShow = false;
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.productShow = false;
        }
    }
};
</script>